create-component_skill

Overview

This skill guides creating new styled CSS components and semantic classes following the project's established patterns. It enforces semantic naming, Tailwind utility composition via @apply, default dark mode support, and test coverage for both static CSS and component rendering. Use it to produce consistent, reusable UI pieces with documented usage examples.

How this skill works

When invoked, the skill walks through a Todo checklist: survey existing components, decide if composition suffices, pick an atomic design level and a semantic name, add the CSS class using @apply and dark: variants, integrate markup examples, and add tests. It produces a focused set of edits: a small CSS addition in styles/components.css, static CSS tests, and a rendering test for the component in the appropriate framework.

When to use it

• Creating a new UI element (button, card, badge, form field) that needs a semantic class
• Adding a new semantic CSS class to styles/components.css
• Building a reusable UI pattern that should include dark mode by default
• Ensuring new styles have both static CSS tests and component rendering tests
• When you want to prefer composition over adding duplicate classes in markup

Best practices

• Survey styles/components.css first and prefer composing existing classes with utilities
• Choose clear semantic names (e.g. .button-primary, .card-title) that match repo patterns
• Use Tailwind @apply for grouping utilities and include dark: variants for colors/backgrounds
• Keep classes focused (atoms vs molecules) and avoid utility-like or abbreviated names
• Add a short CSS comment with usage and provide React/HTML examples plus minimal tests

Example use cases

• Add a primary call-to-action button .button-primary with hover and focus states
• Create a reusable .card that composes spacing, shadow, and dark-background utilities
• Build a simple .badge that can be combined with color utilities instead of new classes
• Introduce a .form-field molecule that wraps label, input, and helper text styles
• Create tests: verify .component-class exists in components.css and a React test checks className application