skills.rest
dhamija
dhamijaCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Apply UX-driven design principles to React/TypeScript UI code automatically.

Updated Jan 25, 2026
Search Tags:#typescript#frontend#responsive design#design principles#ux-design#UI components
One-click install
npx skills add https://github.com/dhamija/claude-workflow-agents --skill frontend-dhamija
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/dhamija/claude-workflow-agents/tree/main/templates/skills/frontend
Command: npx skills add https://github.com/dhamija/claude-workflow-agents --skill frontend-dhamija

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often requires manually applying design principles to UI code. This Skill streamlines that task by automatically applying UX-driven rules during component implementation and layout construction.

Core Features & Use Cases

  • Auto-apply design principles to UI components and layouts.
  • Ensure accessibility-friendly defaults and consistent UI patterns across projects.
  • Use with React/TypeScript projects to maintain cohesive UX and interface quality.

Quick Start

Use this skill to scaffold a new UI component that follows the design principles referenced from the ux-design skill, within your existing project.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I automate frontend component design with UX principles in React?▼

This Skill automates frontend implementation by applying design principles to React/TypeScript UI code. It enforces accessibility-friendly defaults and consistent patterns during component development, reducing manual rule application and maintaining cohesive interface quality across your project.

Can I use this to ensure responsive design across my React components?▼

Yes. The Skill covers responsive layouts and component-based UI development within React/TypeScript projects. It applies design rules automatically during layout construction, helping maintain consistent responsive behavior without manual principle enforcement.

What design principles does this apply to TypeScript UI code?▼

The Skill references ux-design guidance to enforce rules covering accessibility defaults, UI pattern consistency, and component structure. It integrates these principles into React/TypeScript implementation, applying them during both component scaffolding and layout construction.

Do I need existing React and TypeScript tooling to use this?▼

Yes. The Skill requires a project context with React and TypeScript tooling already configured. It works within your existing setup to automate design principle application rather than providing its own development environment.

How does this handle API integration with frontend components?▼

The Skill covers API integration as part of component-based UI development in React/TypeScript projects. It applies design principles throughout the component implementation, including patterns for connecting UI to backend services.

What's the best way to scaffold new UI components following design standards?▼

Use this Skill to scaffold new UI components within your existing React/TypeScript project. It automatically applies design principles referenced from ux-design guidance, ensuring new components follow established standards and accessibility patterns from the start.

Related Skills

Explore More Software Engineering Skills→
simnovasimnova
18

vercel-react-best-practices

Apply performance best practices to React and Next.js code.

Official
Basic
11547613341154761334

response-compliance

Run standardized tests to validate Response API endpoint schema and response formats.

Community
Intermediate
TheSpiciestDevTheSpiciestDev

angular-tooling

Generate Angular v20+ components, services, directives, and pipes via Angular CLI.

Community
Intermediate
HeatMarieHeatMarie

design-guide

Document Paperclip UI components, design principles, and tokens for React projects.

Community
Intermediate