frontend-design

Estrelas9

Forks0

Atualizado9 de junho de 2026 às 10:30

Design and implement polished, domain-appropriate frontend interfaces using existing app conventions, visual verification, and native browser testing.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

bhaveshpabnani

bhaveshpabnani/Humungousaur

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers de interfaces web e digitaisInformática e Matemática·SOC 15-1255

SKILL.md

readonly

name	frontend-design
description	Design and implement polished, domain-appropriate frontend interfaces using existing app conventions, visual verification, and native browser testing.

Frontend Design

Purpose

Build usable interfaces, not placeholder pages. This skill guides product screens, dashboards, tools, and frontend changes with empathy, domain fit, and verification.

When To Use

Use for UI builds, redesigns, frontend polish, app screens, visual QA, responsive layout, and product-flow improvements.

Inputs And Evidence

Product domain, audience, existing design system, screenshots, current UI code, and interaction goals.
Browser observations, screenshots, and test results.

Tool Map

read_file
search_workspace
browser_live_open
browser_live_observe
browser_live_screenshot
live-browser-testing
codebase-inspection

Workflow

Inspect existing frontend patterns before designing.
Match density, tone, layout, and controls to the domain.
Build the actual usable screen first, not a marketing shell.
Keep interactions discoverable and ergonomic.
Verify in browser with screenshots/observations.
Fix responsive text/layout overlap before calling done.

Native Implementation Boundaries

Use repo-native frontend code and Humungousaur browser tools.
Do not import Anthropic frontend-design or external reference design code.
Generated visual references may inspire, but implementation must be project-owned.

Safety And Approval

Avoid hiding important actions.
Do not add unrelated dependencies without approval.
Preserve existing design conventions unless the task asks for a redesign.

Verification

Browser evidence should prove the UI renders.
Check desktop/mobile where relevant.
Report any unverified viewports or interactions.

Failure Modes

Generic landing-page output for a tool/app.
Pretty but unusable controls.
No real browser verification.

References

Shortlist item: frontend-design.

Mais deste repositório

mesmo repositório

platform-collector-development

bhaveshpabnani/Humungousaur

Design, implement, organize, document, and verify Humungousaur platform OS collectors for macOS, Windows, or Linux using official OS API references, shared event envelopes, helper health, privacy-first metadata, and repo-native adapter boundaries.

2026-06-119

software-engineering

bhaveshpabnani/Humungousaur

Parent skill for code inspection, debugging, tests, CI, reviews, dependency security, skill authoring, experiments, and engineering workflows.

2026-06-119

agent-access-control

bhaveshpabnani/Humungousaur

Apply user, stranger, group, channel, and action access tiers using native channel policy, allowlists, approvals, and cognitive review.

2026-06-099

agent-self-assessment

bhaveshpabnani/Humungousaur

Assess the assistant's readiness, capability fit, safety risks, tool coverage, and verification plan before or during complex work. Use when work is high-impact, ambiguous, risky, long-running, or failure-prone.

2026-06-099

agent-self-reflection

bhaveshpabnani/Humungousaur

Review recent agent behavior, uncertainty, mistakes, interaction quality, and lessons so the assistant can improve future work. Use after complex tasks, failures, user corrections, or long sessions.

2026-06-099

ambient-room-context

bhaveshpabnani/Humungousaur

Treat unmentioned group-room chatter as quiet context unless policy, mention, direct request, or model-led cognition decides a response is appropriate. Use for Slack channels, Discord servers, Telegram groups, Matrix rooms, and similar shared spaces.

2026-06-099

name	frontend-design
description	Design and implement polished, domain-appropriate frontend interfaces using existing app conventions, visual verification, and native browser testing.

Frontend Design

Purpose

Build usable interfaces, not placeholder pages. This skill guides product screens, dashboards, tools, and frontend changes with empathy, domain fit, and verification.

When To Use

Use for UI builds, redesigns, frontend polish, app screens, visual QA, responsive layout, and product-flow improvements.

Inputs And Evidence

Product domain, audience, existing design system, screenshots, current UI code, and interaction goals.
Browser observations, screenshots, and test results.

Tool Map

read_file
search_workspace
browser_live_open
browser_live_observe
browser_live_screenshot
live-browser-testing
codebase-inspection

Workflow

Inspect existing frontend patterns before designing.
Match density, tone, layout, and controls to the domain.
Build the actual usable screen first, not a marketing shell.
Keep interactions discoverable and ergonomic.
Verify in browser with screenshots/observations.
Fix responsive text/layout overlap before calling done.

Native Implementation Boundaries

Use repo-native frontend code and Humungousaur browser tools.
Do not import Anthropic frontend-design or external reference design code.
Generated visual references may inspire, but implementation must be project-owned.

Safety And Approval

Avoid hiding important actions.
Do not add unrelated dependencies without approval.
Preserve existing design conventions unless the task asks for a redesign.

Verification

Browser evidence should prove the UI renders.
Check desktop/mobile where relevant.
Report any unverified viewports or interactions.

Failure Modes

Generic landing-page output for a tool/app.
Pretty but unusable controls.
No real browser verification.

References

Shortlist item: frontend-design.