skills.rest
VilnaCRM-Org
VilnaCRM-OrgOFFICIAL
Explore all skills by this author →
GitHub

frontend-component-development

Builds and modifies React components, hooks, and forms following profile-configured architecture and quality gates.

1|Updated Jun 9, 2026
Search Tags:#accessibility#frontend#react#i18n#mui#testing library#component development
One-click install
npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill frontend-component-development-vilnacrm-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-component-development
Source: https://github.com/VilnaCRM-Org/claude-plugins/tree/main/plugins/react-frontend-sdlc/skills/frontend-component-development
Command: npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill frontend-component-development-vilnacrm-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It enforces consistent placement, naming, styling, accessibility, and testing rules when building or changing React UI, so every component lands in the correct module and passes the project's mapped quality lanes without manual convention checking. ## Core Features & Use Cases - Profile-driven conventions: Reads architecture, framework, and quality settings from .claude/react-sdlc.yml so placement, naming prefixes, path aliases, and the UI library (MUI v7 + Emotion) are never hardcoded. - TDD workflow with semantic selectors: Requires a failing Testing Library test first, forbids data-testid, and mandates semantic queries like getByRole. - Accessibility and i18n enforcement: Requires accessible names, keyboard operability, WCAG AA contrast, and synchronized locale keys for every user-facing string. - Use Case: When implementing a story that adds a shared button component, the skill places it under the shared components root with the configured prefix, styles it via theme tokens, adds translations for all locales, and verifies format, lint, unit, and visual lanes all exit 0. ## Quick Start Ask the agent to build the new feature component from the story's acceptance criteria using the frontend component development workflow and run the mapped make targets to verify it.

Frequently Asked Questions about frontend-component-development

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

FAQPage Schema
How do I add a new React component to a feature module?▼

Place feature-specific components in the owning feature's components folder under the configured source root, and shared reusable UI under the shared components root with the configured prefix. Write a failing Testing Library test first, then implement using the profile's UI library and theme tokens.

How to style React components with MUI and Emotion?▼

Prefer MUI components and theme tokens for spacing, palette, and typography before custom CSS. Move large or reused static sx objects and styled definitions outside render so they are not reallocated per render, and extract shared fragments instead of copy-pasting.

Can I use data-testid for Testing Library selectors?▼

No, adding data-testid is forbidden. Locate elements by user-facing semantics such as getByRole, getByLabelText, or getByText, falling back to a stable id only when no semantic query fits, and fix the component's semantics instead.

Does this workflow support projects without Storybook or Figma?▼

Yes, capabilities are read from the profile. When capabilities.storybook or capabilities.figma is false, the corresponding step is recorded as skipped and the work proceeds against the story's written acceptance criteria.

Why must non-React TypeScript logic avoid static methods and free functions?▼

The skill enforces instance methods on injectable classes resolved through the DI container for all non-React logic files. React components and hooks are exempt since they are functions by definition, and violations must be refactored rather than suppressed.

Related Skills

Explore More Software Engineering Skills→
ArthTech-AIArthTech-AI

using-git-worktrees

Create isolated git worktrees for branch-specific development.

Official
Advanced
uiverifyuiverify
21

factory

Implements a requested change and drives it to a merge-ready PR through review, e2e verification, and CI monitoring.

Official
Advanced
samjhechtsamjhecht
4

design-system-governance

Detect design token drift between Figma and code implementations.

Community
Advanced
iamjpsinghiamjpsingh

fullstack-design

Integrate a Django backend with a React/TypeScript frontend using a service-layer pattern.

Community
Advanced