frontend-component skill

Overview

This skill designs and implements React and Next.js UI components with TypeScript-ready outputs. It creates component structure, defines props and state, and delivers reusable, documented TSX components placed into the project folders. The goal is fast, consistent component delivery that fits common frontend conventions and the project's file layout.

How this skill works

Provide a component request or trigger keywords (component, TSX, implement) and the agent drafts a component plan: directory path, props and types, component code, and basic documentation. It generates files into src/components/ and supporting types into src/types/, and can produce storybook-ready examples or usage snippets. The output focuses on maintainability, typed interfaces, and clear prop contracts.

When to use it

• You need a new UI component for a React or Next.js app.
• Refactoring a view into smaller, reusable components.
• Standardizing props and types across similar components.
• Creating accessible components with clear contracts.
• Generating starter code for design-system components.

Best practices

• Define a small, focused prop interface and place types in src/types/ for reuse.
• Keep components single-responsibility: UI rendering vs. data fetching separation.
• Prefer composition over inheritance; expose slots or children for flexibility.
• Include minimal unit tests or story examples to document behavior.
• Use clear, descriptive prop names and default values for predictable behavior.

Example use cases

• Create a Button component with variants, sizes, and a typed props interface.
• Build a Form Input component with validation hooks and accessible labels.
• Split a large page into Header, Sidebar, and Content components with shared types.
• Generate a Card component with image, title, and action slots for reuse across pages.
• Produce a small design-system atom (Badge, Avatar) with story examples.

FAQ