skills.rest
constellos
constellosOFFICIAL
Explore all skills by this author →
Website𝕏@constellosaiGitHub

UI Design

Implement contract-first UI components with TypeScript interfaces in Next.js.

5|3|Updated Nov 30, 2025
Search Tags:#design#React#TypeScript#UI#Tailwind#server-components#compound-components
One-click install
npx skills add https://github.com/constellos/claude-code-plugins --skill ui-design-constellos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Design
Source: https://github.com/constellos/claude-code-plugins/tree/main/plugins/nextjs-supabase-ai-sdk-dev/skills/ui-design
Command: npx skills add https://github.com/constellos/claude-code-plugins --skill ui-design-constellos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI Design solves the challenge of translating design intent into reusable, contract-first UI components by enforcing TypeScript interfaces and server-component patterns in React.

Core Features & Use Cases

  • Contract-first interface definitions before implementation for predictable APIs.
  • Server Components as default, with compound component patterns and Tailwind-based styling.
  • Use Case: Build a reusable Card library in a Next.js app with TS types and accessible structure.

Quick Start

To begin, define your component contracts in TypeScript interfaces, then implement components using the compound pattern and server components workflow described in this guide.

Frequently Asked Questions about UI Design

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

FAQPage Schema
How do I build reusable React components using a contract-first approach?▼

To build reusable React components with a contract-first approach, define TypeScript interfaces before implementation, then apply compound component patterns and default to server components in Next.js.

What is the best way to structure a React UI library with TypeScript and Tailwind?▼

The best way to structure a React UI library is to organize components into compound component patterns, enforce TypeScript interfaces, apply Tailwind styling, and adopt server components by default.

Can I use server components by default for compound component architectures in Next.js?▼

Yes, you can use server components by default for compound component architectures in Next.js, ensuring TypeScript interfaces are defined first to maintain predictable and reusable component APIs.

How does defining TypeScript interfaces before code improve UI component design?▼

Defining TypeScript interfaces before code improves UI component design by enforcing a contract-first workflow, translating design intent into predictable APIs, and providing structured documentation for component usage.

Do I need Next.js and TypeScript to implement contract-first UI components?▼

Yes, this contract-first UI implementation specifically targets Next.js projects using TypeScript, applying Tailwind styling and compound component architectures to build accessible and reusable component libraries.

Related Skills

Explore More Design & Creative Skills→
kazdenckazdenc
42

nextjs-init

Scaffold a Next.js project with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
dylantarredylantarre
38

component-docs

Generate Markdown component API docs from TypeScript interfaces.

Community
Intermediate
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic
oiagorodriguesoiagorodrigues

react-composition-patterns

Refactor boolean-prop React components into compound components with provider-based state.

Community
Advanced