art-direction

Solid

Use on any page build, redesign, or 'make it look better' request on a site that has (or needs) a saved Art Direction. Loads the direction before the first element is written, plans tokens in two passes against the direction's donts and the known AI-default aesthetics, builds with tokens preserved, checks the result with respira_check_design, and mints a live preview. Also the import lane for Claude Design output and other design-system documents.

Data & Documents 43 stars 8 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
55
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Art Direction **Version:** 1.1.0 **Updated:** 2026-08-14 **Category:** intelligence **Status:** stable **Requires:** Respira for WordPress plugin 8.6.20+ + MCP server 8.3+ --- ## Description Art Direction is the taste layer for every page an agent builds or restyles on a WordPress site. A site's Art Direction is one saved document: palette, fonts, spacing, guidance, donts, and waivers, with readiness computed on every save and guessed values flagged `inferred: true`. This skill makes sure that document exists before any visual work starts, that every token in the build traces back to it, and that the finished page is checked against it instead of eyeballed. It does not replace a human designer. It keeps a designer's decisions faithful on the live site: the direction is the designer's taste written down, and the agent's job is to follow it, check against it, and show receipts. --- ## When to Use Load this skill for any visual work on the site: - Building a new page, section, or landing page - A redesign, restyle, or any "make it look better" request - Converting HTML or a design file into builder content - The user brings a design system from outside (Claude Design, Figma tokens, Tailwind config, a Markdown brand spec) - Before any other content-creation skill runs, when the site has an active direction If the site has an active direction, load it before the first element is written. If it has none, creating one is the first unit of work, not an afterthought. --- ...

Details

Author
respira-press
Repository
respira-press/agent-skills-wordpress
Created
6 months ago
Last Updated
3 days ago
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

art-direction

Design an interface with a visual language of its own instead of assembling one from defaults. Use when building a landing page, product UI, portfolio or marketing site where the look has to be distinctive — and whenever a design risks reading as template-generated. Derives the visual language from the subject, writes ART-DIRECTION.md and DESIGN-TOKENS.md before any code, then audits the built result against them. For products with flows or forms, run ux-direction first.

0 Updated 1 months ago
audient-id4
AI & Automation Featured

art-direction

Direct visual and creative work for campaigns, photography, illustration, video, and branded experiences. Use this skill whenever the user wants to brief a photographer, direct illustrators, plan a creative campaign, develop visual concepts, or evaluate creative work for fit. Triggers on art direction, photo brief, photography brief, illustration brief, campaign concept, creative concept, visual direction, mood board, look and feel, visual treatment, video direction. Also triggers when the user has approved brand identity but needs to extend it into specific creative deliverables. Use `creative-direction` instead when the ask is the project-wide aesthetic brief that this skill consumes as input.

843 Updated 3 days ago
rampstackco
Web & Frontend Listed

design-direction

Establish a deliberate aesthetic point of view before building anything visual. Use this skill FIRST whenever starting any visual work — a website, landing page, app UI, dashboard, data visualization, slide deck, game screen, generative art piece, poster, or component library — even if the user only says "make it look good", "build me a page", or "design a UI". Also use it when the user complains that a design looks generic, bland, "AI-generated", or like a template. This skill produces a short written design philosophy that every other design decision follows.

2 Updated 1 months ago
jangles-byte