skills.rest
Hedgehogues
HedgehoguesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui

Scaffold React components with Vitest tests and CSS Modules.

25|5|Updated Mar 25, 2026
Search Tags:#vitest#testing#ui#accessibility#frontend#react#css-modules
One-click install
npx skills add https://github.com/Hedgehogues/awesome-claude --skill ui-hedgehogues
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/Hedgehogues/awesome-claude/tree/main/skills/ui
Command: npx skills add https://github.com/Hedgehogues/awesome-claude --skill ui-hedgehogues

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to design, implement, and validate UI components and design-system patterns using a tests-first approach, reducing defects and speeding up delivery.

Core Features & Use Cases

  • Tests-first UI development: Write tests before components to guarantee behavior and accessibility.
  • Component library & design system enforcement: Build reusable React components with CSS Modules and design-system tokens.
  • Real-world workflow: Scaffold new components, redesign pages, and apply UX fixes while maintaining accessibility and responsiveness.

Quick Start

Create and wire a new component by instructing Claude to scaffold the files, implement tests, and run the full red-green-refactor cycle.

Frequently Asked Questions about ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React components using a test-driven development workflow?▼

React component test-driven development involves writing failing Vitest tests first, implementing component logic to pass tests, and refactoring for accessibility and responsiveness throughout the cycle.

What is the best way to enforce design system conformance in a React UI?▼

Enforcing design system conformance in React UI involves using CSS Modules with design-system tokens, ensuring reusable components maintain strict styling standards and accessibility compliance.

How does test-driven development work for frontend accessibility?▼

Test-driven development for frontend accessibility automates component scaffolding and writes accessibility-focused Vitest tests before implementation, ensuring components meet responsive requirements before integration.

Can I use Vitest and CSS Modules to scaffold new UI components automatically?▼

Vitest and CSS Modules automatically scaffold new UI components by wiring files and running a deterministic red-green-refactor cycle to validate behavior and design-system conformance.

Does this UI development workflow support redesigning pages and applying UX fixes?▼

This UI development workflow supports redesigning pages and applying UX fixes by guiding developers through component integration into routes while maintaining accessibility and responsiveness across devices.

Related Skills

Explore More Design & Creative Skills→
lsst-sqrelsst-sqre
2

component-creation

Create React components with TypeScript, CSS Modules, Storybook, and vitest tests.

Official
Intermediate
eralvarezeralvarez

frontend-design

Generate frontend interfaces from user briefs using React, Vue, or Svelte.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced
hjemmesidekongenhjemmesidekongen
1

storybook-patterns

Develop Storybook UI components with CSF3 stories and interaction tests.

Community
Advanced