frontend-ui-engineering SKILL.md skillA

frontend-ui-engineering from seaworld008/commonly-used-high-value-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add seaworld008/commonly-used-high-value-skills/frontend-ui-engineering@v1.0.5

Pins v1.0.5 in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
seaworld008/commonly-used-high-value-skills
Path
openclaw-skills/frontend-ui-engineering/SKILL.md
Versions recorded
5
Latest version
v1.0.5, committed Oct 16, 2026
First version recorded
Aug 17, 2026
Size
12,012 bytes
Repository stars
73
License
MIT

Build accessible, responsive interfaces and components with production UI states, project conventions, and browser validation.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# Frontend UI Engineering

## Overview

Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."

## When to Use

- Building new UI components or pages
- Modifying existing user-facing interfaces
- Implementing responsive layouts
- Adding interactivity or state management
- Fixing visual or UX issues

## Component Architecture

### File Structure

Colocate everything related to a component:

```
src/components/
  TaskList/
    TaskList.tsx          # Component implementation
    TaskList.test.tsx     # Tests
    TaskList.stories.tsx  # Storybook stories (if using)
    use-task-list.ts      # Custom hook (if complex state)
    types.ts              # Component-specific types (if needed)
```

### Component Patterns

**Prefer composition over configuration:**

```tsx
// Good: Composable
<Card>
  <CardHeader>
    <CardTitle>Tasks</CardTitle>
  </CardHeader>
  <CardBody>
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add seaworld008/commonly-used-high-value-skills/frontend-ui-engineering@sha256:3b7ab60d9d166b8b

The line at the top of this page pins the label v1.0.5, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_tjguxne67g6zwxvg.svg)](https://markdownregistry.com/a/art_tjguxne67g6zwxvg)

1 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 5 versions of this file, between Aug 17, 2026 and Oct 16, 2026, about one every 15 days.

versioncommittedcommitsizeaudit
v1.0.5 latest2026-10-16 acb3315 12,012 BA view · diff
v1.0.42026-09-28 81f57ef 12,003 BA view · diff
v1.0.32026-09-07 7aad3b0 11,002 BA view · diff
v1.0.22026-09-06 e36bbe4 11,002 BA view · diff
v1.0.12026-08-17 d608dde 11,199 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (12012 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

seaworld008/commonly-used-high-value-skills · 73 stars · license MIT · pushed 2026-10-19 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_tjguxne67g6zwxvg
GET https://markdownregistry.com/api/v1/resolve?ref=seaworld008/commonly-used-high-value-skills/frontend-ui-engineering
GET https://markdownregistry.com/api/v1/blob/3b7ab60d9d166b8b87980bcb303080e834925378c6eb0977b63f86e417de76b1

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from seaworld008/commonly-used-high-value-skills

AGENTS.md AGENTS.md file
seaworld008/commonly-used-high-value-skills · AGENTS.md
git:20260907.7aad3b0 · audit A · 73 stars
CLAUDE.md CLAUDE.md file
seaworld008/commonly-used-high-value-skills · CLAUDE.md
git:20260907.7aad3b0 · audit A · 73 stars
agent-browser SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-browser/SKILL.md · Use when an agent needs real browser automation for semantic element targeting, form interaction, screenshots…
v1.0.0 · audit A · 73 stars
agent-designer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-designer/SKILL.md · Design AI agent responsibilities, tools, memory, orchestration, and evaluation when defining an agent architecture or…
v1.0.2 · audit A · 73 stars
CLAUDE.md@openclaw-skills/agent-hub CLAUDE.md file
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-hub/CLAUDE.md
git:20260424.86f3732 · audit A · 73 stars
agent-hub SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-hub/SKILL.md · Compare independent solutions with agent-hub when parallel competition is requested; isolate Git worktrees, evaluate…
v1.0.11 · audit A · 73 stars
agent-workflow-designer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agent-workflow-designer/SKILL.md · Design agent orchestration, handoffs, state, recovery, and evaluation when a workflow needs multiple coordinated agents…
v1.1.1 · audit A · 73 stars
agile-product-owner SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/agile-product-owner/SKILL.md · Manage product backlogs and sprints: user stories, acceptance criteria, epic breakdown, prioritization, estimates, and…
v1.0.1 · audit A · 73 stars
algorithmic-art SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/algorithmic-art/SKILL.md · Create original generative art with p5.js, seeded randomness, flow fields, particles, and interactive parameters when…
v1.0.1 · audit B · 73 stars
andrej-karpathy-skills SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/andrej-karpathy-skills/SKILL.md · Karpathy-inspired coding discipline for AI agents: think before coding, keep changes simple, edit surgically, and…
v1.0.0 · audit A · 73 stars
api-and-interface-design SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/api-and-interface-design/SKILL.md · Design REST/GraphQL APIs, module interfaces, and type contracts when creating endpoints or changing public boundaries.
v1.0.4 · audit A · 73 stars
api-design-reviewer SKILL.md skill
seaworld008/commonly-used-high-value-skills · openclaw-skills/api-design-reviewer/SKILL.md · Use when reviewing API designs for consistency, usability, versioning, error semantics, security, backward…
v1.0.0 · audit A · 73 stars

Every file in seaworld008/commonly-used-high-value-skills

Other files named frontend-ui-engineering

frontend-ui-engineering SKILL.md skill
addyosmani/agent-skills · skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20261003.3e1e0a2 · audit A · 109,013 stars
frontend-ui-engineering SKILL.md skill
shashankswe2020-ux/whoop-mcp · .github/skills/frontend-ui-engineering/SKILL.md · Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components…
git:20260410.1a22ea0 · audit A · 171 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-forgecat/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20260916.3a6b22e · audit A · 92 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-codex/.agents/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20260916.3a6b22e · audit A · 92 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-cursor/.cursor/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20260916.3a6b22e · audit A · 92 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-forgecat/platforms/cursor/.cursor/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20260916.3a6b22e · audit A · 92 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-claude/.claude/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs.
git:20260916.3a6b22e · audit A · 92 stars
frontend-ui-engineering SKILL.md skill
nota-america/forgecat-agent-profiles · profiles/addyosmani/agent-skills/for-forgecat/platforms/codex/.agents/skills/frontend-ui-engineering/SKILL.md · Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages…
git:20260916.3a6b22e · audit A · 92 stars

Browse by kind, by grade A, or by owner.