Make Claude Code Remember Your UI Preferences Using Agent Skills

Agent Skills Overview

Agent Skills is a prompt‑engineering technique introduced by Anthropic that lets Claude Code attach external markdown documents (Skills) to a conversation only when they are needed. Each Skill consists of three parts: metadata (name and description), the instruction body (prompt), and optional resources such as CSV tables or scripts.

Metadata and On‑Demand Loading

At the start of a Skill file the author writes two short fields – Name and Description . Claude loads these fields into the system prompt for every session because they are tiny and do not consume many tokens. The rest of the file (the instruction) is kept on the server and is sent to the LLM only when the user request matches the Skill.

Modular UI Specification

To control the appearance of a generated blog site the author created a markdown file UI‑Design.md that lists concrete UI constraints, e.g.

Do not use blue‑purple gradients. Use SVG icons instead of emojis. Top navigation bar with glass‑morphism (semi‑transparent) effect. Hero section with a semi‑transparent image background. Headings use a specific font (placeholder “xxx”). Buttons use a specific colour (placeholder “xxx”). Articles displayed as cards with a cover image on top.

Instead of copying this list into every prompt, the file is stored as a Skill. When a user asks Claude Code to build a “beautiful” blog, Claude automatically loads UI‑Design.md and the LLM receives the full specification.

Conditional Sub‑Skills for Different Styles

Because a single UI file can become unwieldy, the author split styles into separate markdown files such as Minimalist.md, Tech.md, and Fresh.md. The main UI Skill contains a conditional map:

if style == "minimalist": load "Minimalist.md"
elif style == "tech":       load "Tech.md"
elif style == "fresh":      load "Fresh.md"

This enables the LLM to load only the style that matches the user’s request, further reducing token usage.

Fine‑Grained UI Parameters in CSV Tables

For even more detailed control (button colours, chart palettes, icon sets, etc.) the author stores the parameters in CSV files. A small Python script reads the CSVs and returns the row that matches a query. The script is referenced in the Skill and executed by Claude Code on demand.

# Example Python helper (simplified)
import csv, sys

def query(csv_path, key, value):
    with open(csv_path, newline='') as f:
        reader = csv.DictReader(f)
        for row in reader:
            if row[key] == value:
                print(row)
                return
    print("No match")

if __name__ == "__main__":
    query(sys.argv[1], sys.argv[2], sys.argv[3])

Workflow Summary

Claude starts the session and loads the metadata of all available Skills.

When the user request requires a particular Skill, Claude asks the client to send the full markdown instruction.

If the instruction references external resources (CSV tables, Python script), Claude triggers on‑demand loading and execution.

The LLM uses the retrieved data to generate the final artifact (e.g., a blog site with the requested UI).

Real‑World Example

The UI‑Design Skill described above is publicly available on GitHub and has attracted more than 16 000 stars, demonstrating that a well‑structured Skill can dramatically improve the quality of AI‑generated UI code.

Key Benefits

Token efficiency: large instruction bodies are transmitted only when needed.

Maintainability: UI styles, SVG animation guides, PPT templates, or daily‑report formats are each isolated in their own markdown file.

Extensibility: additional resources (scripts, data tables) can be attached without changing the core prompt.

Dynamic selection: the LLM decides which Skill(s) to load based on the user’s natural language request.