skills.rest
t-strings
t-stringsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

Frontend Components

Guide writing, reviewing, and refactoring frontend components against coding standards.

Updated Dec 23, 2025
Search Tags:#frontend#components#UI#reusability#design-system
One-click install
npx skills add https://github.com/t-strings/tdom-path --skill frontend-components-t-strings
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Components
Source: https://github.com/t-strings/tdom-path/tree/main/.claude/skills/frontend-components
Command: npx skills add https://github.com/t-strings/tdom-path --skill frontend-components-t-strings

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides Claude with guidance on frontend component design to promote reuse and consistency.

Core Features & Use Cases

  • Reusability: Design components for easy reuse across pages.
  • Documentation: Maintain clear component usage notes.
  • Use Case: Build a library of reusable card and button components with consistent props.

Quick Start

Create a small library of reusable UI components following Frontend Components guidelines.

Frequently Asked Questions about Frontend Components

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

FAQPage Schema
How do I create reusable UI components for my frontend?▼

Reusable UI components are self-contained elements designed to work across multiple pages with consistent props and behavior. Structure components with clear interfaces, document their usage, and establish naming conventions to enable easy reuse and reduce development time across your codebase.

What makes a frontend component accessible and maintainable?▼

Accessible components follow semantic HTML, include ARIA attributes where needed, and meet keyboard navigation standards. Maintainability comes from consistent naming, clear documentation, standardized structure, and alignment with your design system guidelines to simplify reviews and refactoring.

How should I organize and name components in a design system?▼

Establish standardized naming conventions, folder structures, and import patterns across your component library. Consistent organization enforces coding standards, makes components discoverable, reduces naming conflicts, and ensures all team members follow the same component structure and conventions.

Can I apply component standards to an existing codebase?▼

Yes. Review existing components against your standards, refactor to meet naming and structure requirements, and enforce guidelines going forward. This approach brings legacy code into alignment while maintaining functionality and letting you incrementally improve consistency and reusability.

What should component documentation include?▼

Document each component's purpose, available props, usage examples, and accessibility considerations. Clear documentation helps developers understand when and how to reuse components, reduces duplication, and supports consistent implementation across your frontend.

Related Skills

Explore More Design & Creative Skills→
KentoShimizuKentoShimizu
7

visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

Community
Intermediate
monam2monam2

Storybook

Document UI components with interactive stories for React and Vue.

Community
Intermediate
WellApp-aiWellApp-ai
341

code-review

Detect hard-rule violations and quality issues in JavaScript/TypeScript code changes.

Official
Intermediate
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic