A professional standard for organizing, writing, and scaling React-based frontend components using TypeScript and modern best practices.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install super-publish-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install super-publish-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Component Specification Guide?
The Component Specification Guide is a technical blueprint designed to streamline frontend development for Openclaw Skills. It establishes a rigorous framework for directory organization, import logic, and TypeScript usage, ensuring that AI agents and human developers alike produce maintainable, high-quality code. By adhering to these standards, teams can eliminate technical debt and ensure seamless integration across complex web applications.
This skill focuses on the synergy between React, Tailwind CSS, and shadcn/ui. It provides developers with a clear roadmap for building functional components while maintaining a strict 300-line limit to ensure modularity and high performance. Whether you are building internal tools or user-facing interfaces, this specification acts as the single source of truth for UI development.
Component Specification Guide Use Cases
- Standardizing frontend architecture across a distributed team using Openclaw Skills.
- Training AI coding agents to generate predictable, bug-free React code.
- Refactoring legacy React projects into modern, functional component structures.
- Onboarding new developers to a unified coding style and naming convention.
How Component Specification Guide Works
- Organize files into a structured client/src directory separating UI components, pages, hooks, and lib utilities.
- Implement functional components using a standardized template that includes Lucide icons, Framer Motion, and Tailwind-based styling.
- Apply a strict import order starting with React core, followed by third-party libraries, and ending with local assets.
- Enforce TypeScript safety by defining interfaces for all Props and avoiding the any type.
- Monitor component size, triggering a subdivision into sub-components once a file exceeds 300 lines of code.
Component Specification Guide Setup
To integrate these standards into your local development environment for Openclaw Skills, you can initialize your project structure with the following commands:
# Create the standardized directory structure
mkdir -p client/src/{components/ui,pages,hooks,contexts,lib,constants}
# Install core dependencies
npm install lucide-react framer-motion clsx tailwind-merge
Component Specification Guide Data Schema & Taxonomy
The skill enforces a clear metadata taxonomy and file organization as detailed below:
| Directory | Content Type | Purpose |
|---|---|---|
components/ui/ |
shadcn/ui | Base UI primitives (non-modifiable) |
hooks/ |
.ts / .tsx |
Custom React hooks for logic reuse |
lib/ |
Utility functions | Helper methods and cn utility |
pages/ |
PascalCase components | Top-level route components |
constants/ |
kebab-case files | Global constants and configuration |
Component Specification Guide Advanced Features
- Multi-agent support: The strict file organization allows multiple AI agents to work on different layers (hooks vs. components) without merge conflicts.
- Component subdivision hooks: Automated architectural rules that dictate when to split a HeroSection into smaller fragments like HeroActions or HeroTitle.
- Error Boundary enforcement: Exclusive use of Class components for error handling while maintaining functional purity elsewhere.
- Design system integration: Pre-configured CSS variable usage through a centralized glass-card and section-eyebrow taxonomy.
SKILL.md
Loading
Related Openclaw Skills
Longport Quant Trader
An automated quantitative trading integration for Longbridge Securities featuring oversold and momentum strategies with real-time Feishu notifications.
Hong Kong Bus & MTR ETA Agent
A high-performance transit tracking skill for real-time Hong Kong bus and MTR heavy rail arrival information via natural language queries.
Baidu Content Censor
A powerful AI moderation tool for real-time text and image safety screening integrated via Openclaw Skills.
Feishu Knowledge Ingest
A specialized skill for batch ingesting Feishu folders and attachments into reviewable, report-first knowledge artifacts for AI agents.
Startup Researcher
An expert orchestrator that researches AI startups, performs market analysis, and generates professional PDF intelligence reports.
Proactive Agent
A sophisticated architectural framework that transforms AI agents from passive task-followers into proactive, self-improving partners capable of surviving context loss.
Featured*
