frontend

Name: frontend
Availability: InStock
Author: dhamija

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

Ready to run

npx skills add https://github.com/dhamija/claude-workflow-agents --skill frontend-dhamija

💬 Prompt for ChatGPT / Claude Chat▼

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.