Manus에서 모든 스킬 실행
원클릭으로
원클릭으로
원클릭으로 Manus에서 모든 스킬 실행
시작하기new-component
Scaffold a new Svelte or Astro component in the correct category directory with appropriate boilerplate
스타1
포크0
업데이트2026년 2월 23일 04:32
SKILL.md
readonly메뉴
Scaffold a new Svelte or Astro component in the correct category directory with appropriate boilerplate
| name | new-component |
| description | Scaffold a new Svelte or Astro component in the correct category directory with appropriate boilerplate |
| disable-model-invocation | true |
Create a new component with the right boilerplate for its category.
/new-component <category> <ComponentName>
Categories: interactive, visualizations, content, navigation, layout, ui
interactive/, visualizations/, navigation/, ui/ → Svelte 5 (.svelte)layout/, content/ → Astro (.astro), unless interactivity is needed (then Svelte)src/components/<category>/<ComponentName>.svelte (or .astro)Financial calculators with user inputs. Include:
<script lang="ts"> block@/lib/calculations.ts and @/lib/constants.ts as needed$state, $derived) for reactive valuesprefers-reduced-motion consideration for any animationsD3-powered charts. Include:
import * as d3 from 'd3' (import only needed modules)$effect for D3 bindings (binds to DOM after mount)aria-hidden="true" on decorative SVG, text alternative for screen readers.dark class or use CSS custom properties)$effect return functionReusable content elements (callouts, disclosures, tooltips). Include:
Props with type Props = { ... }Navigation components. Include:
role="navigation", aria-current="page")Page-level structural components. Include:
PropsReusable UI primitives (inputs, buttons). Include:
For /new-component interactive TaxBracketCalculator:
Creates src/components/interactive/TaxBracketCalculator.svelte with:
<script lang="ts">
import { CONTRIBUTION_LIMITS } from '@/lib/constants';
let income = $state(75_000);
const effectiveTaxRate = $derived(/* calculation */);
</script>
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
Tax Bracket Calculator
</h3>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Annual Income
<input
type="number"
bind:value={income}
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800"
/>
</label>
<p class="mt-4 text-gray-600 dark:text-gray-400">
Effective tax rate: <strong>{effectiveTaxRate}%</strong>
</p>
</div>