LogoClawIndex
CasesSkillsAbout
LogoClawIndex

design-taste-frontend-v1 - Generate structured, responsive React frontends

Generates React or Next.js frontends using defined design, interaction, responsiveness, performance, and dependency-verification rules.

Tags

Updated: 2026-10-12
frontend developmentReactNext.jsresponsive designTailwind CSSUI animationdesign systems

Capabilities

Check package dependenciesApply responsive layout rulesImplement interactive UI statesCreate asymmetric layouts

Typical Inputs

User design requirementsProject package.jsonProject source files

Typical Outputs

Frontend source codeInstallation commandsResponsive UI layouts

What this skill does

  • Check package dependencies
  • Apply responsive layout rules
  • Implement interactive UI states
  • Create asymmetric layouts
  • Apply motion directives
  • Enforce icon and styling rules
  • Optimize animation performance

Inputs

  • User design requirements
  • Project package.json
  • Project source files
  • Installed package versions

Outputs

  • Frontend source code
  • Installation commands
  • Responsive UI layouts
  • Loading, empty, and error states
  • Interactive animation behavior

Requirements

  • React or Next.js environment
  • Tailwind CSS
  • package.json access
  • Supported icon package
  • Framer Motion when required

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.