prototype — 21 brand-grade prototype agents.
Filtered to od.mode: prototype. Every skill below
reads the active DESIGN.md as a system prompt, so it inherits
colors, type, and spacing from any portable system you pair it with.
- 001
faq-page A Frequently Asked Questions (FAQ) page with collapsible accordion sections,
search functionality, and category filtering. Use when the brief asks for
"FAQ", "help center", "questions", or "support page". - 002 agent-browser Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
- 003 artifacts-builder Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
- 004 d3-visualization Teaches the agent to produce D3 charts and interactive data visualizations. Useful for editorial dashboards, reports, and explanatory graphics.
- 005 doc Read, create, and edit .docx documents with formatting and layout fidelity via OpenAI's document skill.
- 006 docx Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables.
- 007 flutter-animating-apps Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.
- 008 frontend-dev Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
- 009 gsap-core Core GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives.
- 010 gsap-react GSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps.
- 011 gsap-scrolltrigger GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.
- 012 gsap-timeline GSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences.
- 013 hand-drawn-diagrams Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
- 014
login-flow Mobile login and authentication flow screens - 015 minimax-docx Professional DOCX document creation and editing using OpenXML SDK. Useful for branded reports, polished proposals, and template-based authoring.
- 016 minimax-pdf Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.
- 017 pdf Extract text, create PDFs, and handle forms. Useful for press releases, branded one-pagers, and printable design deliverables.
- 018
release-notes-one-pager Release notes one-page HTML with highlights, Added, Fixed, Breaking changes,
Known issues, and Upgrade note. Writes explicit "None" style sections
whenever the user does not provide details. - 019 shader-dev GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.
- 020 threejs Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
- 021 web-artifacts-builder Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.