claude

frontend-design

Frontend design guidance, Playwright browser automation skill, and Playwright MCP server in one plugin

2 on GitHubby AerionDysetiv0.0.1MITupdated 10 days agofrontend
/

Plugin frontend-design from marketplace aeriondyseti-plugins in aeriondyseti/aeriondyseti-plugins. Commands read from the repo's manifest — 9 days ago.

This plugin runs code on your machine — it starts local MCP servers. The exact commands are listed below; read them before installing.

What it installs

Skills (4)

  • frontend-design

    Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

  • interface-design

    This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).

  • playwright

    Browser automation with Playwright. For simple tasks (navigate, click, screenshot, check elements), use the Playwright MCP tools directly. For complex automation (multi-viewport testing, loops, network interception, data extraction), write scripts. Use when the user wants to test websites, automate

  • web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Slash commands (5)

  • /frontend-design:design:audit

    Check code against your design system patterns and web interface guidelines (accessibility, performance, etc).

  • /frontend-design:design:critique

    Critique your build for craft, then rebuild what defaulted.

  • /frontend-design:design:extract

    Extract design patterns from existing code to create a system.md file.

  • /frontend-design:design:status

    Show current design system state including direction, tokens, and patterns.

  • /frontend-design:init

    Overview of the frontend-design plugin — skills, commands, MCP tools, and design system workflow.

MCP servers (1)

  • playwright

    runs: npx @playwright/mcp@latest

View source on GitHub

More from aeriondyseti/aeriondyseti-plugins

All 8 plugins →

dev-toolkit

claude

Development toolkit: MCP servers (Serena, Context7, RepoMap) and git workflow skills for Claude Code

5 skills · 7 commands · 3 MCP servers

2

code-flow

claude

A thinking discipline for any code change. Discover → Execute → Verify.

4 skills · 4 agents

2

vector-memory

claude

RAG-powered session memory with waypoints for Claude Code

4 skills · 1 MCP server · hooks

2

context-monitor

claude

Per-session context-usage monitor: warns the user as token pressure and compression count climb.

hooks

2

command-highlight

claude

Syntax-highlights Bash and PowerShell tool calls, including embedded Python/TypeScript scripts in heredocs and -c/-e strings, each in its own language.

2

plugin-kit

claude

Shared widgets for Claude Code mods: other plugins hand $.kit their state and draw what it returns.

2

Similar plugins

example-skills

claude

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

ui-ux-pro-max

claude

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

daisyui

claudecodex

daisyUI component library skill

7 skills

saadeghi/daisyui 42,821

backend-development

claudecodex

Backend API design, GraphQL architecture, workflow orchestration with Temporal, and test-driven backend development

9 skills · 1 command · 8 agents

wshobson/agents 42,461

Maintain frontend-design?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins8 plugins