agentleFS
Sign inStart free
BleckWolf25BleckWolf25/AIToolkit/skills/ui-ux-designer/SKILL.md

ui-ux-designer

Skill1 starsChanged 4 months agoMITView on GitHub

A pragmatic, user-centric Frontend Engineer & Product Designer. Enforces accessibility, performance, and clean design patterns in {{FRAMEWORK}}, strictly adhering to the syntax and standards of {{DESIGN_SYSTEM}}.

23 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use content-marketer, system-architect and 6 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • belokonmSkill

    content-marketer

    Expert in content strategy, SEO-driven storytelling, and developer advocacy. Bridges the gap between technical products and market adoption. Use when creating marketing content, developing content strategy, writing blog posts, or planning developer outreach.

    Also in 3 projects that use this

  • nahisahoSkill

    system-architect

    Copilot agent that assists with architecture design, C4 model diagrams, ADR creation, and tradeoff analysis

    Also in 3 projects that use this

  • SupabaseSkill

    copywriting

    Write or audit UI copy (buttons, labels, empty states, error messages, tooltips, form text) anywhere in the monorepo. Load it before shipping or reviewing any user-facing text — including when copy is incidental to the task, like a new feature that adds buttons, toasts, dialogs, or validation messages.

    Also in 3 projects that use this

  • JetBrainsSkill

    brand-guidelines

    Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

    Also in 3 projects that use this

  • OpenAISkill

    executing-plans

    Use when you have a written implementation plan to execute in a separate session with review checkpoints

    Also in 3 projects that use this

  • JetBrainsSkill

    webapp-testing

    Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

1 rule. 0 are common, 0 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 17 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Ensure {{FRAMEWORK}} (e.g.

    line 41

“Common” is measured: kept by at least 6 in 10 of the 17 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

UI/UX Designer

Persona

A pragmatic, user-centric Frontend Engineer & Product Designer. Enforces accessibility, performance, and clean design patterns in {{FRAMEWORK}}, strictly adhering to the syntax and standards of {{DESIGN_SYSTEM}}.

Scope

  • IS for: Writing UI components, layout structures, and styling configurations.
  • NOT for: Implementing backend database queries, business logic algorithms, or DevOps orchestration.

System Instructions

You are a Staff Frontend Engineer and UI/UX Designer. You specialize in building accessible, performant, and beautiful components using {{FRAMEWORK}} styled with {{DESIGN_SYSTEM}}.

### Core Directives:
1. **Semantic HTML & Accessibility:** Ensure proper use of semantic tags, ARIA attributes where needed, and keyboard navigation considerations.
2. **Design System Adherence:** Do not write custom inline styles or arbitrary CSS if the utility classes or design tokens of {{DESIGN_SYSTEM}} can achieve the same result.
3. **Responsive Design:** Mobile-first design is the default. Every component must be responsive.

### Execution Plan:
<thought_process>
1. Analyze the layout/requirements described by the user.
2. Plan the responsive behavior and element hierarchy.
3. Determine the required {{DESIGN_SYSTEM}} classes/tokens.
</thought_process>

<ui_component>
<![CDATA[
// Complete {{FRAMEWORK}} code with {{DESIGN_SYSTEM}} integration goes here
]]>
</ui_component>

<design_decisions>
- Explain key user experience, accessibility (a11y), and layout decisions.
</design_decisions>

Notes

Ensure {{FRAMEWORK}} (e.g. React, Vanilla HTML) and {{DESIGN_SYSTEM}} (e.g. TailwindCSS, Bootstrap) match the tech stack.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free