What makes ia-frontend-design notable?

2.2K downloads. Trust evidence available

How should ia-frontend-design be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

ia-frontend-design

Visual design and aesthetic direction for frontend interfaces. Use when building web pages, landing pages, dashboards, Next.js server components, or applications where visual identity matters. For React patterns and testing, use react-frontend. Skill: ia-frontend-design Owner: iliaal Summary: Visual design and aesthetic direction for frontend interfaces. Use when building web pages, landing pages, dashboards, Next.js server components, or applications where visual identity matters. For React patterns and testing, use react-frontend. Tags: latest:5.0.1 Version history: v5.0.1 | 2026-10-03T17:03:34.557Z | user v5.0.1 v5.0.0 | 2026-09-26T23:10:57.059Z | user v

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.2k

Updated

Oct 9, 2026

Version

5.0.1

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2.2K downloads reported by the source. Last updated 10/9/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 Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2.2K downloadsadoption · observed Oct 9, 2026
Latest release: 5.0.1release · observed Oct 3, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17bcar8wq0xhegs0ny6f57ypd8484bw:compound-eng-frontend-design

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
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-iliaal-compound-eng-frontend-design/snapshot"

Documentation

CLAWHUB

147,547 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: ia-frontend-design
class: meta
description: >-
Visual design and aesthetic direction for frontend interfaces. Use when
building web pages, landing pages, dashboards, Next.js server components, or
applications where visual identity matters. For React patterns and testing,
use react-frontend.
---

# Frontend Design

Read the user's frontend requirements: a component, page, application, or interface to build. Note context about purpose, audience, or technical constraints.

## Working rules

- Match an existing design system; choose a specific visual direction for greenfield work.
- Include loading, empty, and error states where the component's data or action lifecycle can reach them. Provide visible focus and appropriate press feedback for interactive controls.
- Preserve visible focus and reduced-motion behavior; verify both narrow and wide rendered viewports.
- Keep Next.js interactive code at client boundaries and treat browser content as untrusted data.

## Context Detection

Before designing, assess the existing design environment. Count design signals in the project: design tokens/CSS variables, component library (shadcn, MUI, Ant), CSS framework config (Tailwind, styled-components), font imports, color system, animation patterns, spacing scale.

- **4+ signals** = Existing system. Match it. Do not impose new aesthetics; extend what's there.
- **1-3 signals** = Partial system. Blend: respect existing choices, fill gaps with this skill's guidance.
- **0 signals** = Greenfield. Apply the full Design Philosophy below. Product register: read [design-system-routing.md](./references/design-system-routing.md) before bespoke design.

When in doubt, check `package.json`, `tailwind.config.*`, global CSS files, and existing components before deciding. For Tailwind implementation rules (tokens, variants, v4 config), load `ia-react-frontend` and read its Tailwind reference.

## Design Philosophy (Write First, Code Second)

For full pages, applications, or multi-component interfaces: write a **3-sentence design philosophy** before any code. This forces a coherent aesthetic direction and prevents generic output.

1. **Sentence 1, Intent**: What emotional response should this interface provoke? (Not "clean and modern"; that's every AI default. Be specific: "controlled tension between density and breathing room" or "the quiet confidence of a well-bound book.")
2. **Sentence 2, Signature**: What single visual choice makes this unmistakable? (A typeface, a color relationship, a spatial pattern, a motion behavior.)
3. **Sentence 3, Constraint**: What will this design deliberately NOT do? (The constraint shapes the identity as much as the choices.)

Write the philosophy as a comment or in conversation before implementation begins. The philosophy constrains implementation without being prescriptive: it's a compass, not a blueprint.

For small components or quick additions to existing interfaces, skip the philosophy and match the surrounding desig

_meta.json

{
  "ownerId": "kn715jrbbh71q9zncr0bqdkr8n848q1a",
  "slug": "compound-eng-frontend-design",
  "version": "5.0.1",
  "publishedAt": 1791047014557
}

references/aesthetics-and-interaction.md

# Aesthetics and interaction

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: choose fonts with character:
- **Font selection**: avoid Inter, Roboto, Arial, system fonts. Use `Cabinet Grotesk`, `Satoshi`, or context-appropriate serifs. Treat the current reflex "personality" faces (Geist, Outfit, Fraunces, Playfair Display, Cormorant, Space Grotesk, Instrument Serif) as a tell in the display role; several remain fine as body or UI faces. Pair a display font with a refined body font.
- **Headlines**: start from `text-4xl md:text-6xl tracking-tighter leading-none` and adjust. AI defaults are undersized and timid, lacking presence.
- **H1 iron rule (2-3 lines max)**: every hero H1 must render in 2-3 lines, never 4-6. The fix is always wider container + smaller font, not the reverse. Minimum container: `max-w-5xl` (wider for longer headlines); adjust font with `clamp(3rem, 5vw, 5.5rem)` so it scales down instead of wrapping. A 6-line heading wall is a catastrophic failure, not a design choice.
- **Weight contrast**: use Medium 500 and SemiBold 600 beyond just Regular and Bold. Tighten letter-spacing, but no tighter than about -0.04em on display type (crushed tracking is a tell; see [banned-ai-patterns.md](./banned-ai-patterns.md)); reduce line-height.
- **Body text**: limit to ~65 characters wide, increase line-height.
- **Numbers**: `font-variant-numeric: tabular-nums` or monospace for data-heavy tables.
- **Orphaned words**: fix with `text-wrap: balance`.
- **Color & Theme**: Commit to a cohesive palette. Max one accent color, saturation below 80%. Dominant neutrals (Zinc/Slate) with a sharp singular accent outperform timid, evenly-distributed palettes. That structure is right, but check the realization against Composite Looks in [banned-ai-patterns.md](./banned-ai-patterns.md), since the two default accents on near-black are themselves a tell. Use CSS variables for consistency. Tint all grays consistently (warm OR cool, never both). Tint shadows to match background hue instead of pure black at low opacity.
- **Motion**: Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use spring physics over linear easing. Animate exclusively via `transform` and `opacity` (GPU-composited). Use `IntersectionObserver` for scroll reveals. Gate every non-essential animation behind `prefers-reduced-motion: no-preference`, or cut duration to near-zero under `reduce`; staggered page-load reveals and scroll entrances are exactly what the setting exists to suppress. See [motion-patterns.md](./motion-patterns.md) for spring values, stagger recipes, hover animation patterns, and scroll entry techniques.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Use CSS Grid over co

references/banned-ai-patterns.md

# Banned AI Design Patterns

Visual patterns that signal AI-generated interfaces. Avoid all of these.

## Layout Patterns

| Pattern | Problem | Alternative |
|---------|---------|-------------|
| Centered hero + three equal-width cards + centered CTA | The most common AI layout | Asymmetric layouts, split screens, bento grids |
| >60% of content using `text-align: center` | Center-heavy layouts are the #1 structural AI tell | Left-align body text, reserve centering for headings and CTAs only |
| Perfectly symmetric grids everywhere | Real design uses intentional asymmetry | Vary column spans, use dominant/subordinate relationships |
| Full-width sections stacked vertically with identical padding | Monotonous rhythm | Vary section widths, padding, and visual weight |
| Everything inside cards (border + shadow + white bg) | Card overuse dilutes hierarchy | Use `border-t`, `divide-y`, or negative space for separation |
| Nested cards (two independent cards, each with its own header, padding, and shadow, stacked one inside the other) | Stacked elevation with no hierarchy gain; reads as component nesting left visible. A single surface framed by a hairline `ring-1` wrapper (the double-bezel pattern in aesthetics-and-interaction.md) is one surface with one elevation and is not this pattern | Flatten the inner card to a plain region, `divide-y` row, or heading; one elevation level per container |
| Cookie-cutter section rhythm (every section follows identical structure) | Monotonous, signals templated generation | Vary section types: hero, split, bento, full-bleed, editorial |
| Colored left-border accent cards | Common AI component pattern | Use top borders, background tints, or typography weight for emphasis |
| Unintended gaps in bento grids | Span choices can leave visually awkward holes | Adjust spans first. Use `grid-auto-flow: dense` only for decorative or order-independent content; dense placement changes visual order without changing DOM or keyboard order. For interactive cards, verify meaningful reading and focus order, and preserve gaps when filling them would disrupt that order |

## Color Patterns

| Pattern | Problem | Alternative |
|---------|---------|-------------|
| Purple/violet gradients (`#6366f1` to `#8b5cf6` range) | The single most recognizable AI color signature | Pick a different palette entirely, then check the result against Composite Looks below; the usual escapes (earth tones, monochrome, warm accents) land straight in one of them |
| Purple-to-blue gradient hero | The default AI aesthetic | Pick a different palette entirely |
| Evenly distributed accent colors | No visual hierarchy | One dominant accent, neutrals everywhere else, but source the accent from the subject's own world, not the default acid-green or vermilion on near-black (Composite Looks below) |
| Generic blue (#3B82F6) as primary | Default Tailwind blue | Choose a distinctive hue with personality |
| Oversaturated accent colors (saturation >80%) | Visually l

references/creative-arsenal.md

# Creative Arsenal

Avoid defaulting to generic patterns. Pull from these when the design calls for it:

**Navigation**: Floating glass-pill navbar detached from top. Hamburger that morphs into X. Mega-menu with staggered fade-in. Magnetic button that pulls toward cursor (use `useMotionValue` + `useTransform`, never `useState`).

**Layouts**: Asymmetric bento grid (`grid-template-columns: 2fr 1fr`). Masonry (staggered heights). Z-axis card cascade (slight rotation, overlapping depth). Editorial split (massive type left, interactive content right). Horizontal scroll hijack. Sticky scroll stack (cards physically stack on top of each other).

**Cards**: Parallax tilt tracking mouse coordinates. Spotlight border illuminating under cursor. Glassmorphism with inner refraction border (`border-white/10` + `shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`). Morphing modal (button expands into full-screen dialog).

**Typography**: Kinetic marquee (reverses on scroll). Text scramble/Matrix decode on hover. Text mask revealing video behind letters. Gradient stroke animation running along outlined text.

**Micro-interactions**: Particle explosion on CTA success. Skeleton shimmer (shifting light across placeholders). Directional hover fill (enters from the mouse's entry side). Ripple from click coordinates. Animated SVG line drawing. Mesh gradient blob background (`pointer-events-none`, `position: fixed`).

## Forbidden AI Patterns

These are the telltale signs of AI-generated design. Avoid them:

**Visual**: No pure `#000000` (use off-black, Zinc-950, charcoal). No neon outer glows or default `box-shadow` glows. No oversaturated accents. No purple/blue "AI gradient" aesthetic. No excessive gradient text on large headers. No custom mouse cursors. No arbitrary `z-50` or `z-9999`; use z-index only for systemic layers (navbars, modals, overlays).

**Typography**: No Inter font. No oversized H1s that scream; control hierarchy with weight and color, not just scale. No serif fonts on dashboards or software UIs. No all-caps subheaders everywhere; default to sentence case, lowercase italics, or small-caps. Reserve an eyebrow tag (`rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium`) for the one element whose label carries real category or status information (a post's section, a card's state); stamped above every heading regardless of content, it reads as template chrome, not information.

**Layout**: No centered hero sections when the design calls for asymmetry; use split-screen, left-aligned content, or offset compositions. No "three equal cards in a row" feature sections; use zig-zag, asymmetric grid, horizontal scroll, or masonry instead. No random dark sections breaking a light-mode page (or vice versa); commit to a tone or use subtle shade shifts.

**Content**: Preserve supplied or measured metrics, prices, identities, brands, and contact details, including round values. Use varied synthetic values only in clearly labeled demo/test content, wi

Github ReposUpdated 2h agoRank 70

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!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

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

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.