skills.rest
artsmc
artsmcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-developer

Implement React components with TSX, CSS/SCSS/Tailwind styling, and responsive interactions.

Updated Mar 1, 2026
Search Tags:#typescript#ui#accessibility#frontend#react#styling#component
One-click install
npx skills add https://github.com/artsmc/codex-agentic --skill ui-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-developer
Source: https://github.com/artsmc/codex-agentic/tree/main/skills/ui-developer
Command: npx skills add https://github.com/artsmc/codex-agentic --skill ui-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Ui Developer skill encapsulates the need for consistent, high-quality visual implementation of React components, handling TSX creation, styling (CSS/SCSS/Tailwind), ensuring responsive layouts, and implementing basic user interactions (e.g., dropdowns, modals) to align with design systems.

Core Features & Use Cases

  • TSX component development and refactoring for React applications.
  • Styling with CSS/SCSS/Tailwind to match design systems and ensure accessibility.
  • Implementing basic interactions (dropdowns, modals, hover states) with responsive behavior across devices.
  • Use Case: Reuse a button and modal pair across pages, maintaining consistent interaction patterns and focus management.

Quick Start

Tell the Ui Developer to implement a React UI component based on a specified task and verify it with automated Playwright tests.

Frequently Asked Questions about ui-developer

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

FAQPage Schema
How do I automate React UI component development with TypeScript and styling?▼

Automating React UI component development involves generating TSX code, applying CSS, SCSS, or Tailwind styles, and implementing responsive layouts with accessibility considerations. This ensures consistent visual implementation aligned with your design system.

What is the best way to implement accessible React interactions like dropdowns and modals?▼

Implement accessible React interactions by writing TSX for dropdowns and modals while applying focus management and responsive behavior. This ensures basic user interactions align with accessibility considerations across different devices.

Can I use Tailwind CSS to style React components and ensure responsive layouts?▼

Yes, you can use Tailwind CSS to style React components and ensure responsive layouts. The styling process supports CSS, SCSS, and Tailwind to match design systems and deliver test-ready UI behavior with accessibility considerations.

How do I verify React component interactions and visual implementation?▼

Verify React component interactions and visual implementation by validating the generated TSX code and styling against automated Playwright tests. This ensures the UI behavior is test-ready and functions correctly across responsive layouts.

Does refactoring TSX components with this approach maintain focus management for modals?▼

Refactoring TSX components maintains focus management for modals by ensuring consistent interaction patterns. This approach handles basic user interactions and accessibility considerations to align with established design systems during refactoring.

Related Skills

Explore More Software Engineering Skills→
kaeligkaelig
7

code-writer

Generate React component files from design briefs and architecture documents.

Community
Advanced
semicolon-devteamsemicolon-devteam

e2e-test

Automate Playwright end-to-end tests to validate runtime browser behavior.

Official
Advanced
tchiphuongtchiphuong

heroui-v3

Create HeroUI v3 UI components with React 19 and Tailwind CSS v4.

Community
Intermediate
ncsound919ncsound919

React Component Generator

Generate TypeScript React components from TSX templates with standard Props interfaces.

Community
Intermediate