SuperDesign
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface. Skill: SuperDesign Owner: mpociot Summary: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface. Tags: latest:1.0.0 Version history: v1.0.0 | 2026-01-06T17:04:34.735Z | user Frontend design guidelines based on SuperDesign patterns Archive index: Archive v1.0.0: 2 files, 2996 bytes Files: SKILL.md (6178b), _meta.json (130b) File v1.0.0
Rank
62
Safety
84
Downloads
35k
Updated
May 15, 2026
Version
1.0.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 34.9K downloads reported by the source. Last updated 5/15/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed May 15, 2026
- Protocol compatibility
- OpenClawcompatibility · observed May 15, 2026
- Adoption signal
- 34.9K downloadsadoption · observed May 15, 2026
- Latest release
- 1.0.0release · observed Jan 6, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install publishers:mpociot:superdesign- Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
- Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-mpociot-superdesign-2/snapshot"
Documentation
CLAWHUB
6,302 characters of source documentation, loaded on request.
Extracted files
2 files captured from the source.
SKILL.md
---
name: frontend-design
description: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
metadata: {"clawdbot":{"emoji":"🎨"}}
---
# Frontend Design Skill
Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.
## Design Workflow
Follow this structured approach for UI design:
1. **Layout Design** — Think through component structure, create ASCII wireframes
2. **Theme Design** — Define colors, fonts, spacing, shadows
3. **Animation Design** — Plan micro-interactions and transitions
4. **Implementation** — Generate the actual code
### 1. Layout Design
Before coding, sketch the layout in ASCII format:
```
┌─────────────────────────────────────┐
│ HEADER / NAV BAR │
├─────────────────────────────────────┤
│ │
│ HERO SECTION │
│ (Title + CTA) │
│ │
├─────────────────────────────────────┤
│ FEATURE │ FEATURE │ FEATURE │
│ CARD │ CARD │ CARD │
├─────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────┘
```
### 2. Theme Guidelines
**Color Rules:**
- NEVER use generic bootstrap-style blue (#007bff) — it looks dated
- Prefer oklch() for modern color definitions
- Use semantic color variables (--primary, --secondary, --muted, etc.)
- Consider both light and dark mode from the start
**Font Selection (Google Fonts):**
```
Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium
```
**Spacing & Shadows:**
- Use consistent spacing scale (0.25rem base)
- Shadows should be subtle — avoid heavy drop shadows
- Consider using oklch() for shadow colors too
### 3. Theme Patterns
**Modern Dark Mode (Vercel/Linear style):**
```css
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.970 0 0);
--muted: oklch(0.970 0 0);
--muted-foreground: oklch(0.556 0 0);
--border: oklch(0.922 0 0);
--radius: 0.625rem;
--font-sans: Inter, system-ui, sans-serif;
}
```
**Neo-Brutalism (90s web revival):**
```css
:root {
--background: oklch(1 0 0);
--foreground: oklch(0 0 0);
--primary: oklch(0.649 0.237 26.97);
--secondary: oklch(0.968 0.211 109.77);
--accent: oklch(0.564 0.241 260.82);
--border: oklch(0 0 0);
--radius: 0px;
--shadow: 4px 4px 0px 0px hsl(0 0% 0%);
--font-sans: DM Sans, sans-serif;
--font-mono: Space Mono, monospace;
}
```
**Glassmorphism:**
```css
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur_meta.json
{
"ownerId": "kn79bhw9e6awqnf5v5y0ybsncd7ynfvp",
"slug": "superdesign",
"version": "1.0.0",
"publishedAt": 1767719074735
}AionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"label": "Vendor",
"value": "Clawhub",
"category": "vendor",
"href": "https://clawhub.ai/mpociot/superdesign",
"sourceUrl": "https://clawhub.ai/mpociot/superdesign",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-05-15T06:26:51.397Z",
"isPublic": true,
"metadata": {}
},
{
"factKey": "protocols",
"label": "Protocol compatibility",
"value": "OpenClaw",
"category": "compatibility",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-mpociot-superdesign-2/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-mpociot-superdesign-2/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-05-15T06:26:51.397Z",
"isPublic": true,
"metadata": {}
},
{
"factKey": "traction",
"label": "Adoption signal",
"value": "34.9K downloads",
"category": "adoption",
"href": "https://clawhub.ai/mpociot/superdesign",
"sourceUrl": "https://clawhub.ai/mpociot/superdesign",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-05-15T06:26:51.397Z",
"isPublic": true,
"metadata": {}
},
{
"factKey": "latest_release",
"label": "Latest release",
"value": "1.0.0",
"category": "release",
"href": "https://clawhub.ai/mpociot/superdesign",
"sourceUrl": "https://clawhub.ai/mpociot/superdesign",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-01-06T17:04:34.735Z",
"isPublic": true,
"metadata": {}
},
{
"factKey": "handshake_status",
"label": "Handshake status",
"value": "UNKNOWN",
"category": "security",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-mpociot-superdesign-2/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-mpociot-superdesign-2/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true,
"metadata": {}
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.0.0",
"description": "Frontend design guidelines based on SuperDesign patterns",
"href": "https://clawhub.ai/mpociot/superdesign",
"sourceUrl": "https://clawhub.ai/mpociot/superdesign",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-01-06T17:04:34.735Z",
"isPublic": true,
"metadata": {}
}
]
}Record generated Oct 9, 2026.