메뉴
Create a new React component with co-located test, story, and styles. Use when creating new UI components, when asked to scaffold/generate a component, or when building new pages.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Close implementation loops with target-bound independent evidence and a portable proof receipt. Use when an agent changes a real system and must earn a completion claim that survives the session.
First fixture skill for skdd add tests. Use when testing drop installation.
Second fixture skill for skdd add tests. Use when testing multi-skill drops.
Safely backfill historical data for a pipeline stage — scope the date range, run a dry-run, execute in chunks to avoid overwhelming the database, and verify row counts after each chunk. Use when historical data is missing, when a pipeline stage is added retroactively, or when asked to "backfill the {stage} table from {start_date}".
Add or extend data validation checks in the pipeline when data quality issues are detected — null-percentage thresholds, value ranges, referential integrity, and row-count sanity checks. Use when a pipeline breaks on bad data, when onboarding a new dataset, or when asked to "add a quality check for {column}".
Onboard a new raw dataset into the data platform — sniff the schema, generate a profiling notebook, create the ingestion job, and add an entry to the data dictionary. Use when adding a new data source, when a partner delivers a new CSV/Parquet drop, or when asked to "onboard the {name} dataset".
| name | component-scaffold |
| description | Create a new React component with co-located test, story, and styles. Use when creating new UI components, when asked to scaffold/generate a component, or when building new pages. |
| metadata | {"forged-by":"claude-agent","forged-from":"session-2026-02-15","forged-reason":"Scaffolded 4 components in one session — same file structure each time","usage-count":"18","last-used":"2026-02-27"} |
Create a new React component following project conventions.
UserCard)page | feature | uiDetermine the directory
page → src/pages/{ComponentName}/feature → src/features/{feature-area}/components/{ComponentName}/ui → src/components/ui/{ComponentName}/Create the component file
{dir}/{ComponentName}.tsx
Create the test file
{dir}/{ComponentName}.test.tsx
Create the story file
{dir}/{ComponentName}.stories.tsx
Create the barrel export
{dir}/index.ts
{ComponentName}Propscss-module-setup)features/auth/components/LoginForm/)