ClawKit Logo
ClawKitReliability Toolkit
Back to Registry
Official Verified

frontend-design

Generates production-ready UI components from natural language. Use when the user asks to design a component, create a button, build a form, prototype a layout, or generate React/Tailwind CSS code. NOT for: backend logic, API design, database schema, or non-UI tasks.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/asimons81/agentic-atlas-frontend-design
Or

Frontend Design Skill

Generates production-ready UI components from natural language descriptions.

Instructions

When the user requests a UI component, layout, or frontend feature:

  1. Ask clarifying questions if the request is ambiguous (responsive? dark mode? existing design system?)
  2. Generate the component using React + Tailwind CSS by default
  3. Output the complete component code with all props, state management, and accessibility attributes
  4. Include ARIA labels, keyboard navigation, and semantic HTML
  5. Verify the component compiles without errors before presenting

Features

  • React component generation with TypeScript
  • Tailwind CSS output (default) with custom config support
  • Responsive design (mobile-first)
  • Dark mode support
  • Animation and transition presets
  • Accessibility audit integration (ARIA, keyboard nav, WCAG 2.1 AA)
  • Component variants (primary, secondary, disabled states)

Output Format

Return the complete component code in a single code block with:

  • Component name
  • Props interface (TypeScript)
  • Full implementation
  • Usage example
  • Accessibility notes

Example

User: "Create a user profile card with avatar, name, role, and a follow button"

→ Generate: React component with Avatar, typography hierarchy, FollowButton with hover state

Dependencies

Requires: Node.js, React, Tailwind CSS (installed in the project)

Read Full Documentation on GitHub

Metadata

Author@asimons81
Stars4473
Views2
Updated2026-05-01
View Author Profile
AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill
Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-asimons81-agentic-atlas-frontend-design": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Tags

#frontend#ui#react#tailwind#css#component
Safety NoteClawKit audits metadata but not runtime behavior. Use with caution.

Related Skills

axure-prototype-generator

Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。

15910701838 4473

react-best-practices

Audits React code for performance, bundle size, and best practices. Use when reviewing React code, auditing bundle size, finding performance issues, checking React 18+ patterns, or evaluating a React codebase. NOT for: non-React projects, backend Node.js code, or CSS-only reviews.

asimons81 4473

SeedFlip Dashboard Theme

Re-theme your OpenClaw dashboard with 104 curated design seeds from SeedFlip. Fonts, colors, shadows, radii. One command, instant transformation.

bockenstette1 4190

ColorLab

Convert colors and generate palettes with WCAG contrast checks. Use when building palettes, converting hex/RGB, checking accessibility.

bytesagain3 4097

align

Data and text alignment reference — sequence alignment, text formatting, memory alignment, and CSS/layout alignment. Use when aligning sequences, formatting columnar output, or understanding byte alignment.

bytesagain3 4097