04 Library

Skills

15 skills

Agent skills in SKILL.md format. Every page's markdown twin IS the skill file — install with one curl, or point your agent at the `.md` URL.

1 Skill

Frontend Design

Guides creation of distinctive, production-grade frontend interfaces that avoid generic 'AI slop' aesthetics.

Distinctive, production-grade interfaces that avoid AI slop SKILL.md

Anthropic (official) 2025

skill design aesthetics frontend

2 Skill

Interface Design

For interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, campaigns).

Dashboards, tools, and apps with craft — not marketing pages SKILL.md

Anthropic (official) 2025

skill interface dashboard app

3 Skill

Theme Crafting

Author complete custom daisyUI 5 themes for PageWeave — full variable sets, OKLCH color logic, dark-mode safety.

Custom daisyUI themes with OKLCH, built for PageWeave SKILL.md

PageWeave 2026

skill theme daisyui oklch

4 Skill

Component Authoring

Write reusable HTML components in daisyUI semantics — self-contained, theme-aware, documented.

Library-grade components: copy-paste HTML that survives any theme SKILL.md

PageWeave 2026

skill components daisyui html

5 Skill

Markdown-First Site

Build websites fully accessible through markdown: .md twins, llms.txt indexes, agenticweb.md, agents_md maintenance loops.

Every page has a markdown twin — the llms.txt discipline SKILL.md

PageWeave 2026

skill markdown llms-txt agents

6 Skill

Animation & Motion

Build UI animations with correct easing, duration, and choreography. Spring physics, scroll-triggered reveals, and reduced-motion safety.

Purposeful motion that communicates — not decorates SKILL.md

skill animation motion css

7 Skill

Design Tokens & Systems

Build scalable token architectures — primitives, semantics, component mappings — that make design systems consistent and themeable.

From raw values to semantic tokens to component APIs — the three-tier architecture SKILL.md

skill tokens design-system css-variables

8 Skill

Accessibility Audit

Systematic accessibility audits: contrast, keyboard navigation, focus management, ARIA, screen reader semantics, and reduced motion.

WCAG 2.2 AA as a release requirement — not an afterthought SKILL.md

skill accessibility a11y wcag

9 Skill

Design Taste & Anti-Slop

Detect and eliminate AI-generated design patterns: purple gradients, centered everything, cream backgrounds, and the sameness that makes interfaces feel machine-made.

Override generic AI output with intentional, metric-driven taste SKILL.md

skill taste anti-slop ai-design

10 Skill

Typography Systems

Build modular type scales, pair fonts with intent, and create hierarchy through size, weight, spacing, and color — not decoration.

Type scales, font pairing, and hierarchy that carries the design SKILL.md

skill typography fonts type-scale

11 Skill

Color Systems

Build perceptually uniform color systems in OKLCH — from primitives through semantic roles to dark-mode-safe themes that pass WCAG contrast.

OKLCH palettes, semantic roles, and contrast-safe themes SKILL.md

saifyxpro 2026

skill color oklch palette

12 Skill

Responsive & Adaptive Layout

Build responsive layouts with fluid grids, container queries, and adaptive patterns that work from 320px to ultrawide — no breakpoint chaos.

From mobile-first to fluid grids — layout that serves the content SKILL.md

skydashnet, Google M3 2026

skill responsive adaptive layout

13 Skill

UX Writing & Microcopy

Write clear, actionable microcopy for every UI state: buttons, errors, empty states, onboarding, notifications, and form validation.

Words that guide — button labels, error messages, empty states SKILL.md

plugin87, ca-who-codes 2026

skill ux-writing microcopy copywriting

14 Skill

Design Review & Critique

Run systematic design reviews: Nielsen's heuristics, visual hierarchy scoring, accessibility checks, and prioritized fix plans with concrete remedies.

Structured evaluation — heuristic scoring, anti-pattern detection, fix plans SKILL.md

pbakaus 2025

skill review critique heuristic

15 Skill

Design System from Reference

Turn a style reference into a complete, AI-consumable design system: tokens JSON, CSS variables, markdown spec, and visual preview — ready for consistent code generation.

Extract tokens, typography, and patterns from any design — screenshot, Figma, or description SKILL.md

signerlabs 2026

skill design-system extraction reference

How to install

mkdir -p ~/.config/opencode/skills/frontend-design
curl -o ~/.config/opencode/skills/frontend-design/SKILL.md \
  https://pageweave-design.pageweave.site/skills/frontend-design.md