exec-dashboard-blueprint
Layout and storytelling guide for marketing analytics executive dashboards.
332 repo starsObserved in 1 repos
Design
Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
Temporary UI mock fixtures
How to add short-lived static fixtures for hard-to-reproduce UI states while tuning layout
331 repo starsObserved in 1 repos
Design
vocello-design
Use this skill to generate well-branded interfaces and assets for Vocello (a local-first, Apple-native macOS voice-generation app — formerly QwenVoice). Contains essential design guidelines, colors, type, fonts, assets, and a Mac-app UI kit for prototyping voice-studio interfaces, marketing surfaces, and slides.
331 repo starsObserved in 1 repos
Design
dotfile-brainstorm
Use when you want to build a project but don't have a spec yet and need to brainstorm the idea into a design doc structured for pipeline DOT generation. Use when starting from a vague idea, project concept, or feature request that needs to become a headless autonomous build pipeline.
330 repo starsObserved in 1 repos
Design
flowfile-svg-diagrams
How to author, wire, and verify the hand-drawn brand SVG diagrams on the Flowfile docs site — the exact file contract (viewBox, role + aria-label, defs→style→content), the shipped palette and typography ladders with exact hex values, the reusable component library (node chips, preview tables, arrow markers, decision diamonds, storage substrates, greyed insets), the concept-vs-technical register split and the one warm exception, the dark-mode technique against the two page canvases, the labeled-placeholder pattern for screenshots, and the redraw lessons the maintainer has already enforced. Use when creating or editing any SVG under docs/assets/images/, when a docs page needs a new concept or architecture diagram, when replacing or adding an IMAGE-PLACEHOLDER, when a diagram reads badly in dark mode, or when asked to draw, redraw, or fix any docs illustration.
330 repo starsObserved in 1 repos
Design
visual-redesign
Surgical aesthetic upgrade pipeline for existing React codebases. Takes ugly, functional code (Bootstrap defaults, generic Tailwind, amateur CSS) and transforms it to Awwwards-tier quality WITHOUT touching or breaking the underlying JavaScript logic — states, effects, API calls, event handlers, routing, and data flow are sacred and untouchable. Audits the existing code across 7 layers (tokens, typography, spacing, color, components, atmosphere, motion), classifies every element as Sacred (JS logic — do not touch) or Slop (visual cruft — upgrade), then executes precise CSS-only surgery layer by layer. The skill that turns a developer's "make this look better" into a controlled, non-destructive visual transformation.
329 repo starsObserved in 3 repos
Design
awwwards-hero-section
Hero-section pipeline for building Awwwards/FWA-tier hero sections. Extracts design direction from reference images, provides six hero architectures with implementation blueprints, and enforces the fundamentals that separate award-winning heroes from generic AI output — viewport-scale typography, single focal point, extreme whitespace, tight palette. Hero-only. Pair with other skills for full pages.
329 repo starsObserved in 1 repos
Design
awwwards-motion-design
Motion design pipeline for building Awwwards/Apple-tier animations, micro-interactions, scroll sequences, page transitions, and kinetic typography. Enforces the principles that separate award-winning motion from generic CSS transitions — intentional easing, scroll-linked choreography, staggered reveals, magnetic interactions, text splitting, parallax depth, morphing state transitions, and the invisible micro-animations that make interfaces feel alive. Every animation must justify its existence, respect reduced-motion, and run at 60fps. Motion is choreography, not decoration.
329 repo starsObserved in 1 repos
Design
imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design reference images via ChatGPT image generation. Fires when the user asks to generate website mockups, landing page concepts, section design references, or UI comp images. Enforces ONE separate horizontal image PER section, composition variety (bans the default left-text/right-image on every section), background-image freedom, varied CTAs, varied hero scales, narrative concept spine, second-read moments, and a single consistent palette across all images. Outputs structured prompt blueprints that produce Awwwards-tier visual references a developer or coding model can accurately recreate. Image generation only — does not write code.
329 repo starsObserved in 1 repos
Design
twitter-graphic
Generate a beautiful Twitter/social media promo PNG graphic for OpenADE features
327 repo starsObserved in 1 repos
Design