rlabs-design

Stars9

Forks2

UpdatedApril 19, 2026 at 02:51

Use this skill to generate well-branded interfaces and assets for Rlabs, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

0xrafasec

0xrafasec/ai-workflow

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

File Explorer

55 files

SKILL.md

readonly

name	rlabs-design
description	Use this skill to generate well-branded interfaces and assets for Rlabs, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable	true

Read README.md first — it carries the brand voice, palette rules, motion grammar, accessibility floor, and caveats. Then load the materials that match the surface you're building. Skipping the matching kit is the most common source of off-brand output.

Foundations (load on every surface)

colors_and_type.css — light + dark CSS variables and semantic tokens.
tokens.css — spacing, radii, elevation, motion tokens.
assets/logo/ — rlabs-logo.svg, rlabs-mark.svg. Use these directly; never recreate.
assets/brand/chain-glyph.svg — the chain-of-nodes motif. Use for hero/section accents only.
assets/icons.md — Lucide setup (24px, 1.75px stroke). Stroke-only.

Surface-specific materials (mandatory before designing)

Pick the bucket that matches what the user asked for and load everything in it. Reading just the CSS tokens is not enough — the kits encode component composition, spacing rhythm, and copy patterns that the tokens alone don't convey.

Slides / presentations / decks → load slides/index.html end-to-end. It is the canonical 7-slide template (title, section, content, metric, quote, comparison, closing) — copy structure and class names from it instead of inventing new ones.
Marketing website / landing pages → load ui_kits/website/index.html, then read each component: SiteNav.jsx, Hero.jsx, FeatureGrid.jsx, CodeShowcase.jsx, Footer.jsx, plus README.md.
Product app / dashboard / console → load ui_kits/app/index.html, then read Sidebar.jsx, TopBar.jsx, Overview.jsx, Agents.jsx, Transactions.jsx, _shared/Primitives.jsx, plus README.md.

Preview specimens (consult before inventing)

Before composing a component, check preview/ for the matching specimen card and match its proportions, padding, and state treatment. These are the source of truth for token application:

Color: colors-core.html, colors-neutrals*.html, colors-accents.html, colors-semantic.html, colors-modes.html.
Type: type-display.html, type-body.html, type-mono.html, type-scale.html.
Spacing & shape: spacing-scale.html, spacing-radii.html, spacing-elevation.html, spacing-motion.html, radii.html, elevation.html.
Components: components-buttons.html, components-inputs.html, components-nav.html, components-card.html, components-cards.html, components-badges.html.
Brand application: brand-logo.html, brand-logo-dark.html, brand-logo-light.html, brand-glyph.html, brand-motif.html, brand-icons.html, brand-voice.html.

If a token decision feels ambiguous, the preview card wins.

Output mode

Visual artifact (slides, mocks, throwaway prototypes): copy assets out and emit static HTML the user can open. Reuse the template/kit markup verbatim — adjust content, not structure.
Production code: copy the CSS variables and component patterns into the target codebase. Don't re-derive tokens; reference the existing files.

If invoked with no guidance, ask the user which surface (slides / website / app) and what they want to build, then load the matching kit before producing anything.

Mandatory verification — Playwright fidelity check

After applying the design (artifact or production code), you must run a Playwright check before reporting done. Visual drift between intent and output is the failure mode this skill exists to prevent.

Use the playwright MCP (mcp__plugin_playwright_playwright__*) — it is available in this environment.

Open the reference in a tab: the matching index.html from slides/, ui_kits/website/, or ui_kits/app/. Take a full-page screenshot.
Open your output in a second tab. Take a screenshot at the same viewport (default 1440×900 desktop; also 390×844 if mobile is in scope).
Compare against the brand rules — not just pixel-diff. Check:
- Typography: Poppins ExtraBold display, Roboto body, JetBrains Mono for hashes/code. Lowercase OR uppercase headings (never title case).
- Palette: black/white first; ≤1 accent per view; correct surface (#0A0A0B dark, #FAFAF7 light).
- Radii: 0/4/8/12 only. No pills outside status chips.
- Spacing: 4px grid (4, 8, 12, 16, 24, 32, 48, 64, 96, 128).
- Borders: hairline rgba(_,0.08) defaults.
- Motion: hover/press present and on cubic-bezier(.2,.8,.2,1); no bounces.
- Copy: no emoji, no title case, no hype words, → for CTAs.
Fix any drift in place, re-screenshot, and only then report done. Note the screenshots taken in your final message.

If Playwright is unavailable in the current environment, say so explicitly and list the brand-rule checks you performed by reading the output instead — do not silently skip verification.

Quick cheat sheet

Headings: Poppins ExtraBold 800, lowercase (or UPPERCASE), tight tracking (-0.02em).
Body: Roboto, 400 default. Medium (500) for UI labels. Light (300) for ledes.
Mono: JetBrains Mono for hashes, code, tabular numbers.
Black/white first. Accents: Signal #C6F24E, Ember #FF5B2E, Lapis #2E5BFF, Violet #8B5CF6. One accent per view.
Sharp corners (radius 0–12px; never >12). No rounded pills except status chips.
Motion: cubic-bezier(.2,.8,.2,1), 120/200/320/520ms. Transform + opacity only. No bounces. No linear easings.
No emoji in product or marketing copy. Unicode arrows (→) encouraged.
Dark surface: #0A0A0B (not pure black). Light surface: #FAFAF7 (warm paper).

More from this repository

same repository

autopilot

0xrafasec/ai-workflow

Execute a roadmap end-to-end and AUTONOMOUSLY — phase by phase, task by task: develop in a worktree, review in a fresh context, fix findings, then merge to main. No human gate by default. Use when the user says 'run the roadmap', 'autopilot this', 'ship phases 1-3', 'work through docs/roadmap/', wants unattended multi-phase delivery landed on main, or hands over a roadmap file expecting the whole thing built, reviewed, and merged. Use --supervised to restore per-phase human checkpoints.

2026-06-299

design

0xrafasec/ai-workflow

Create distinctive, production-grade UI designs in Paper.design MCP — full design system + brand guide + all screens, or a single flow. Use when the user asks to mock up, wireframe, design screens, produce UI, build a visual prototype, or mentions Paper / Paper.design / design system / brand guide / screen layouts for the project. Commits to a bold aesthetic direction (editorial, brutalist, luxury, retro-futuristic, etc.) rather than defaulting to generic AI-SaaS looks. Grounds every design decision in the PRD and architecture, not guesswork.

2026-04-239

verify-design

0xrafasec/ai-workflow

Diff current UI against Paper design refs with Playwright runtime fidelity checks, then fix mismatches in place. Run before (and during) UI work.

2026-04-219

factory

0xrafasec/ai-workflow

Single-milestone/phase delivery pipeline — implements every open issue in one GitHub milestone (or one roadmap phase) as parallel, conflict-free PRs, each pre-reviewed by a fresh-context reviewer agent. Stops with all PRs open for human merge. Use when the user says 'run factory on milestone N', 'ship phase 003_auth', 'open PRs for the auth milestone', or '/factory --milestone <N>'. For end-to-end multi-phase roadmap execution, use /autopilot instead.

2026-04-209

feature

0xrafasec/ai-workflow

Implement a feature end-to-end from a spec file at docs/specs/<name>.md — code it and verify it. Stops with a working tree the user can review. Supports --commit (auto-commit, output only log) and --pr (auto-commit + open PR, output only log + URL). Use when the user says 'implement the auth spec', 'build feature X', 'code up the Y spec', 'work through docs/specs/<name>.md', or points at a spec and asks to execute it.

2026-04-199

issues

0xrafasec/ai-workflow

File GitHub milestones + issues for a roadmap, a phase, or a spec — one milestone per phase, one issue per task/slice — using the trunk-based patterns from /spec, /roadmap, and /feature. Use when the user says 'create the GitHub issues', 'file the issues for this roadmap', 'open issues for this spec', 'make the milestones', or points at docs/roadmap/*.md or docs/specs/*.md and asks to hand them to GitHub.

2026-04-199

name	rlabs-design
description	Use this skill to generate well-branded interfaces and assets for Rlabs, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable	true

Foundations (load on every surface)

colors_and_type.css — light + dark CSS variables and semantic tokens.
tokens.css — spacing, radii, elevation, motion tokens.
assets/logo/ — rlabs-logo.svg, rlabs-mark.svg. Use these directly; never recreate.
assets/brand/chain-glyph.svg — the chain-of-nodes motif. Use for hero/section accents only.
assets/icons.md — Lucide setup (24px, 1.75px stroke). Stroke-only.

Surface-specific materials (mandatory before designing)

Slides / presentations / decks → load slides/index.html end-to-end. It is the canonical 7-slide template (title, section, content, metric, quote, comparison, closing) — copy structure and class names from it instead of inventing new ones.
Marketing website / landing pages → load ui_kits/website/index.html, then read each component: SiteNav.jsx, Hero.jsx, FeatureGrid.jsx, CodeShowcase.jsx, Footer.jsx, plus README.md.
Product app / dashboard / console → load ui_kits/app/index.html, then read Sidebar.jsx, TopBar.jsx, Overview.jsx, Agents.jsx, Transactions.jsx, _shared/Primitives.jsx, plus README.md.

Preview specimens (consult before inventing)

Before composing a component, check preview/ for the matching specimen card and match its proportions, padding, and state treatment. These are the source of truth for token application:

Color: colors-core.html, colors-neutrals*.html, colors-accents.html, colors-semantic.html, colors-modes.html.
Type: type-display.html, type-body.html, type-mono.html, type-scale.html.
Spacing & shape: spacing-scale.html, spacing-radii.html, spacing-elevation.html, spacing-motion.html, radii.html, elevation.html.
Components: components-buttons.html, components-inputs.html, components-nav.html, components-card.html, components-cards.html, components-badges.html.
Brand application: brand-logo.html, brand-logo-dark.html, brand-logo-light.html, brand-glyph.html, brand-motif.html, brand-icons.html, brand-voice.html.

If a token decision feels ambiguous, the preview card wins.

Output mode

Visual artifact (slides, mocks, throwaway prototypes): copy assets out and emit static HTML the user can open. Reuse the template/kit markup verbatim — adjust content, not structure.
Production code: copy the CSS variables and component patterns into the target codebase. Don't re-derive tokens; reference the existing files.

If invoked with no guidance, ask the user which surface (slides / website / app) and what they want to build, then load the matching kit before producing anything.

Mandatory verification — Playwright fidelity check

Use the playwright MCP (mcp__plugin_playwright_playwright__*) — it is available in this environment.

Open the reference in a tab: the matching index.html from slides/, ui_kits/website/, or ui_kits/app/. Take a full-page screenshot.
Open your output in a second tab. Take a screenshot at the same viewport (default 1440×900 desktop; also 390×844 if mobile is in scope).
Compare against the brand rules — not just pixel-diff. Check:
- Typography: Poppins ExtraBold display, Roboto body, JetBrains Mono for hashes/code. Lowercase OR uppercase headings (never title case).
- Palette: black/white first; ≤1 accent per view; correct surface (#0A0A0B dark, #FAFAF7 light).
- Radii: 0/4/8/12 only. No pills outside status chips.
- Spacing: 4px grid (4, 8, 12, 16, 24, 32, 48, 64, 96, 128).
- Borders: hairline rgba(_,0.08) defaults.
- Motion: hover/press present and on cubic-bezier(.2,.8,.2,1); no bounces.
- Copy: no emoji, no title case, no hype words, → for CTAs.
Fix any drift in place, re-screenshot, and only then report done. Note the screenshots taken in your final message.

If Playwright is unavailable in the current environment, say so explicitly and list the brand-rule checks you performed by reading the output instead — do not silently skip verification.

Quick cheat sheet

Headings: Poppins ExtraBold 800, lowercase (or UPPERCASE), tight tracking (-0.02em).
Body: Roboto, 400 default. Medium (500) for UI labels. Light (300) for ledes.
Mono: JetBrains Mono for hashes, code, tabular numbers.
Black/white first. Accents: Signal #C6F24E, Ember #FF5B2E, Lapis #2E5BFF, Violet #8B5CF6. One accent per view.
Sharp corners (radius 0–12px; never >12). No rounded pills except status chips.
Motion: cubic-bezier(.2,.8,.2,1), 120/200/320/520ms. Transform + opacity only. No bounces. No linear easings.
No emoji in product or marketing copy. Unicode arrows (→) encouraged.
Dark surface: #0A0A0B (not pure black). Light surface: #FAFAF7 (warm paper).