7.3K skills · sorted by popularity
Draft simple black-and-white screen layouts as standalone SVG files, with numbered explanations of each area. For multiple screens, create a flow overview and an optional static viewer page for browsing and zooming during review.
Create, implement, or review Paperclip capsule visuals that represent agents and their status. Apply the rules for each visual type, document settings for reproducible assets, and provide static alternatives for animated effects.
Review a screen, user flow, or component against the user's task. Assess visual hierarchy, interaction cues, error handling, accessibility, and consistency, then provide prioritized fixes with reasons and identify strengths worth preserving.
Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.
Build a creative studio website with classical illustrations, cobalt colors, serif headings, and cinematic scrolling. Adapt the supplied HTML template to a brand while retaining chapter navigation, service sections, FAQs, and mobile layouts.
Design new web pages, review existing interfaces, or analyze references from URLs and screenshots. The skill guides page structure, colors, typography, and interaction states while respecting an existing project's design system and implementation boundaries.
Build a trading analysis dashboard as a single HTML file, with dense market panels and interactive charts. Include light and dark themes, Live/Demo controls, chart focus views, and a keyboard command menu for navigating the interface.
Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.
Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.
Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.
Create full-screen animated visuals with WebGL, a browser technology for GPU rendering. Combine shaders, 3D scenes, or particles with a text overlay, and deliver the result as one self-contained HTML file without external requests.
Create an HTML pricing page with plan cards, a feature comparison table, expandable FAQs, and action buttons. The skill adapts the number of plans to the brief and follows the project's colors, typography, and component patterns.
Create a hand-drawn HTML wireframe for exploring screen layouts before detailed design. Graph paper, sticky notes, sketch tabs, and rough chart placeholders present an early concept with annotations for discussion and review.
Creates web prototypes inspired by Swiss industrial print, using newsprint backgrounds, oversized black type, fine grid lines, and red accents. It suits editorial pages, agency portfolios, and manifesto sites with a precise, assertive visual style.
Map a mobile app journey across three or four phone frames in one HTML board. Simple gray content blocks, dashed arrows, numbered actions, and short annotations show how users move between screens before detailed visual design.
Choose one visual direction before building, using an existing design system, supplied brand references, or the project brief. Record the choice and define the colors, typography, and other visual settings that guide implementation.
Create an HTML prototype of a social media analytics dashboard for creators. It uses consistent sample data to show platform metrics, follower growth, a top post, trending topics, and comments, with styling drawn from your design system.
Create soft, polished web prototypes with silver or cream backgrounds, nested card borders, rounded surfaces, and carefully specified motion. The skill defines page sections, buttons, navigation, and mobile layouts for a consistent visual style.
Create an animated HTML scene for history or trivia explainers, combining pixel art, a prominent year, moving text, and a scrolling timeline. CSS loops provide motion, making the scene suitable for screen recording.
Extract a Figma file into local project files containing its element hierarchy, reusable color and typography settings, and exportable assets. The structured snapshot supplies source data for later design mapping and implementation steps.
Create a desktop landing page wireframe, a simple layout made of grey boxes, with numbered markers and a matching specification panel. The result shows page structure alongside short implementation and user experience notes.
Review a design across five areas: visual execution, fit to the user's problem, brand consistency, accessibility, and wording. It guides the agent to fix concrete defects and explain any issues that remain unresolved.
Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.
Create a single HTML wireframe for a desktop dashboard using grey blocks, placeholder text bars, and crossed image boxes. Review navigation, information hierarchy, and panel placement before choosing final colors, copy, or imagery.