Build Accessible, Production-Ready Frontends
Frontend work can become inconsistent, inaccessible, or difficult to maintain. This skill guides component architecture, responsive layouts, state handling, and polished user experiences.
์ด ์์ฒญ์ ์์ด์ ํธ์ ๋ณต์ฌํ์ธ์. ๊ณต์ Skill ํ์ด์ง์ ๋งค๋ํ์คํธ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
Review the Skillstore skill "frontend-ui-engineering" from https://skillstore.io/skills/addyosmani-frontend-ui-engineering.md and its manifest at https://skillstore.io/api/skills/addyosmani-frontend-ui-engineering/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.์์ด์ ํธ๋ ๊ณ์ํด์ ๊ณํ์ ํ์ํ๊ณ ๋ณด์ ์ ์ฑ ์์ ์๊ตฌํ๋ ํ์ธ์ ์์ฒญํด์ผ ํฉ๋๋ค.
AI ์์ด์ ํธ, ํฌ๋กค๋ฌ, ์คํฌ๋ฆฝํธ๊ฐ ์ ์ฒด ํ์ด์ง ๋์ ์ ๋ฆฌ๋ ์ปจํ ์คํธ๋ง ํ์ํ ๋ ์ด ๋งํฌ๋ฅผ ์ฌ์ฉํ์ธ์.
"frontend-ui-engineering" ์ฌ์ฉ ์ค์ ๋๋ค. Design a task list that works on mobile and supports keyboard users.
์์ ๊ฒฐ๊ณผ:
A component plan with a task list, task item, loading skeleton, error state, empty state, keyboard behavior, and responsive layout rules.
"frontend-ui-engineering" ์ฌ์ฉ ์ค์ ๋๋ค. Review a dialog that opens without moving focus.
์์ ๊ฒฐ๊ณผ:
A focused accessibility review recommending initial focus, a labeled close control, focus containment, keyboard dismissal, and restoration of focus.
"frontend-ui-engineering" ์ฌ์ฉ ์ค์ ๋๋ค. Improve a dashboard using oversized cards and decorative gradients.
์์ ๊ฒฐ๊ณผ:
A visual review prioritizing information hierarchy, purposeful spacing, design-system colors, restrained surfaces, and layouts optimized for scanning.
All 36 static matches are false positives caused by Markdown fences, inline backticks, illustrative frontend code, or documentation links. No prompt injection, data exfiltration, or executable command instruction was found in SKILL.md.
๋ฒ์ ์ด ์ง์ ๋ ํ๊ฐ ๋ณด๊ณ ์, ์ค๋ฆฝ ๋ฐฐ์ง, ์๋ฒ ๋ ์นด๋ ๋ฐ ์ธ์ฉ์ ๊ณต์ ํ์ธ์. Skillstore๋ ๊ทผ๊ฑฐ๋ฅผ ๋ณด๊ณ ํ์ง๋ง ์ด Skill์ ์์ ์ฌ๋ถ๋ฅผ ํ๋จํ์ง ์์ต๋๋ค.
https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-frontend-ui-engineering/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/addyosmani-frontend-ui-engineering.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>addyosmani. (2026). frontend-ui-engineering security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1@techreport{addyosmani-addyosmani-frontend-ui-engineering-2026,
author = {addyosmani},
title = {frontend-ui-engineering security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-engineering security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "addyosmani"
date-released: "2026-09-19"
url: "https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1"
identifiers:
- type: other
value: "skillstore:addyosmani-frontend-ui-engineering:audit:1"
description: "Skillstore immutable audit report identifier"
Plan a responsive page with focused components, meaningful states, and accessible interactions.
Review a screen for layout, hierarchy, responsiveness, accessibility, and maintainability issues.
Turn design-system principles into practical component and interaction guidance for a shared codebase.
Design a focused component for [feature]. Define its props, states, accessibility behavior, and responsive layout.
Review this page structure: [description]. Recommend a mobile-first layout, component boundaries, spacing, and meaningful empty states.
Review this interface for WCAG 2.1 AA issues. Check keyboard navigation, labels, focus management, contrast, and non-color cues.
Evaluate this frontend implementation against its design system. Identify architectural, responsive, accessibility, state, and visual-quality improvements in priority order.
์์ฑ์
addyosmani๋ผ์ด์ ์ค
MIT
Skillstore ๋ฆฌ๋น์
r1
๋ฒ์ ์๋ด
์์ฑ์๊ฐ ๋ฒ์ ์ ์ ์ธํ์ง ์์์ต๋๋ค.
๋ฆฌํฌ์งํ ๋ฆฌ
https://github.com/addyosmani/agent-skills/tree/c004a74784a08295d52749b04cda634125b9a581/skills/frontend-ui-engineering์ฐธ์กฐ
5d5054f8a23586f9b500fece1cb613a9dffc787b
์ ์ง๋ณด์ ์ต์ ์ฑ
2026. 9. 19.
์ฌ์ฉ๋
0 ๋ค์ด๋ก๋ ยท 0 ์กฐํ
ํ์ผ ๊ตฌ์กฐ
๐ SKILL.md
Clarify User Intent Before You Build
Underspecified requests cause teams to build the wrong outcome and discover misalignment late. This skill runs a focused, one-question interview that turns ambiguity into confirmed intent.
๋ค์ฏ ๊ฐ์ง ํ์ง ๊ธฐ์ค์ผ๋ก ์ฝ๋ ๊ฒํ
์ฝ๋ ๋ณ๊ฒฝ์๋ ์ ํ์ฑ, ๋ณด์, ์ํคํ ์ฒ, ๊ฐ๋ ์ฑ ๋ฐ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ์จ์ด ์์ ์ ์์ต๋๋ค. ์ด ์คํฌ์ ์ฒด๊ณ์ ์ธ ๊ฒํ ํ๋ก์ธ์ค๋ฅผ ์ ์ฉํ์ฌ ์ฐ์ ์์๊ฐ ๋ช ํํ๊ณ ์คํ ๊ฐ๋ฅํ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
Plan Work Into Verifiable Tasks
Large or vague software work can hide dependencies, missing acceptance criteria, and verification gaps. This skill converts a specification into ordered task slices with checkpoints, scope guidance, and clear completion conditions.
Document Decisions and Architecture Clearly
Teams lose context when important technical decisions remain in chat, code comments, or individual memory. This skill turns architectural reasoning, API guidance, project instructions, and release changes into structured documentation.
Harden Applications Against Security Risks
Security reviews can miss trust boundaries and unsafe data flows. This skill supplies threat-modeling prompts, OWASP patterns, and practical review checklists.
Structure Better Context for Coding Agents
Coding agents lose accuracy when context is incomplete, stale, or excessive. This skill provides practical structures for focused sessions, durable rules, and reliable handoffs.
Build Accessible Tailwind Interfaces
์์ฑ์ nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
WCAG ์ค์๋ฅผ ์ํ ์น ์ ๊ทผ์ฑ ๊ฐ์ฌ
์์ฑ์ 89jobrien
์ ๊ทผ์ฑ ๊ฒฉ์ฐจ๋ ์ฌ์ฉ์๋ฅผ ์ฐจ๋จํ๊ณ ์ค์ ๋ฆฌ์คํฌ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ด ์คํฌ์ WCAG ๊ฐ์ฌ, ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ ๊ฒ, ํค๋ณด๋ ํ ์คํธ, ๊ฐ์ ๊ณํ ์๋ฆฝ์ ์๋ดํฉ๋๋ค.
Build Consistent Design Systems and Slides
์์ฑ์ nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
๋ ์ฐฝ์ ์ธ ํ๋ก ํธ์๋ ์ธํฐํ์ด์ค ์ค๊ณ
์์ฑ์ Atman36
์ผ๋ฐ์ ์ธ ์์ฑํ ์ธํฐํ์ด์ค๋ ์์ธก ๊ฐ๋ฅํ๊ณ ์์ฑ๋๊ฐ ๋ฎ์ ๋ณด์ด๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด ์คํฌ์ Claude, Codex, Claude Code๊ฐ ๋ ์ฐฝ์ ์ด๊ณ ํ๋ก๋์ ์์ค์ ํ๋ก ํธ์๋ ๋์์ธ์ ๋ง๋ค๋๋ก ์๋ดํฉ๋๋ค.
React View Transitions ๊ตฌํ
์์ฑ์ vercel-labs
React view transitions๋ ๋ฐฐ์น ์์น๋ฅผ ์๋ชป ์ก๊ธฐ ์ฌ์, ์กฐ์ฉํ ๋ฐ์ํ๊ฑฐ๋ ์๋๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ์ ๋ฐํ ์ ์์ต๋๋ค. ์ด ์คํฌ์ ๋ผ์ฐํธ, Suspense, ๋ชฉ๋ก, ๊ณต์ ์์ ์ ๋๋ฉ์ด์ ์ ํ์ ์๋ดํฉ๋๋ค.
ํ๋ก๋์ ์ ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ํ๋ฐํธ์๋ ๊ธฐ๋ฅ ๊ตฌ์ถ
์์ฑ์ davila7
ํ๋ฐํธ์๋ ํ์ ์ฌ๋ฌ ํ๋ก์ ํธ์์ ์ผ๊ด๋ React ๋ฐ Next.js ์ง์นจ์ด ํ์ํฉ๋๋ค. ์ด ์คํฌ์ ํ๋ฐํธ์๋ ๋ถ์์ ์ํ ์ฐธ์กฐ ์ํฌํ๋ก, ํ์ง ๊ด๋ฆฌ ์ฌ๋ก, ๋ณด์กฐ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.