Xpersona
S

SuperDesign

CLAWHUB · Unverified

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: 3 files, 4013 bytes Files: skill-card.md (1664b), SKILL.md (6178b), _meta.

62
Rank
84
Safety
43k
Downloads

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 42.8K downloads reported by the source. Last updated 11/11/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Install and run

Setup complexity: low.

clawhub skill install s170f0j0qrjftk5522nedp44qh884efe:superdesign
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. 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-erdesign-2/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

8,017 characters of source documentation, loaded on request.

Extracted files

3 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
}

skill-card.md

## Description:

Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

This skill is ready for commercial/non-commercial use.

## Publisher:

[mpociot](https://clawhub.ai/user/mpociot)

### License/Terms of Use:


## Use Case:

Developers and designers use this skill to plan and implement frontend interfaces, including landing pages, dashboards, UI components, responsive layouts, themes, animations, and accessibility details.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Prototype CDN snippets can create supply-chain risk if copied directly into production projects.

Mitigation: For production, use locked package dependencies, pinned versions, bundled assets, or SRI-protected CDN resources.

## Reference(s):

- [ClawHub SuperDesign Skill](https://clawhub.ai/mpociot/skills/superdesign)
- [SuperDesign](https://superdesign.dev)

## Skill Output:

**Output Type(s):** [guidance, markdown, code, configuration]

**Output Format:** [Markdown guidance with example HTML, CSS, and configuration snippets]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May include frontend implementation recommendations, responsive design guidance, accessibility checks, and prototype CDN snippets.]

## Skill Version(s):

1.0.0 (source: server release metadata)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Sponsored

Ads related to SuperDesign and adjacent AI workflows.