sngular-frontend

Component Scaffolding Skill

This skill allows Claude to automatically scaffold UI components with all necessary files and boilerplate code when the context suggests a component needs to be created.

When to Use This Skill

Claude should invoke this skill autonomously when:

• User mentions creating a new component
• Discussion involves building UI elements
• Task requires adding new views or pages
• User describes a component they need
• Code analysis shows a component is referenced but doesn’t exist

What This Skill Does

Automatically generates a complete component structure including:

1. Main component file with TypeScript
2. Styles file (CSS Module, SCSS, or styled-components)
3. Test file with basic tests
4. Storybook story (if Storybook is detected)
5. Type definitions file
6. Index file for clean exports

Framework Detection

The skill detects the project framework and generates appropriate code:

• React: Functional components with hooks
• Next.js: React Server Components or Client Components as appropriate
• Vue 3: Composition API with script setup

Input Parameters

When invoked, the skill expects:

• componentName: Name of the component (e.g., “UserCard”, “LoginForm”)
• componentType: Type of component (“page”, “layout”, “ui”, “feature”)
• hasProps: Whether the component accepts props
• needsState: Whether the component needs internal state
• async: Whether the component fetches data

Generated Structure

For React/Next.js C