frontend-design
Product-focused UI design guidelines emphasizing visual aesthetics, typography, composition, and interaction patterns.
Skill by sivaguru-2113
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/sivaguru-2113-frontend-design
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/frontend-design
What's inside
- Skill name
frontend-design- Description
- Product-focused UI design guidelines emphasizing visual aesthetics, typography, composition, and interaction patterns.
- License
- MIT
- Instructions
- 12 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Frontend Design ## Goal Build visually captivating, high-performance web applications that avoid generic aesthetic defaults. ## Principles - **Typography**: Select modern Google Fonts (Inter, Outfit, Roboto, Space Grotesk) with purposeful weight scale. - **Color Tokens**: Define cohesive color tokens, dark mode schemes, glassmorphism overlays, and smooth CSS gradients. - **Visual Hierarchy**: Use spacing, whitespace, contrast, and layout balance to direct user focus. - **Micro-interactions**: Use subtle CSS hover transitions and tactile feedback.
From sivaguru-2113/Agent-persona, MIT.
More from sivaguru-2113/Agent-persona
- 0.539score
motion-dev
sivaguru-2113
Declarative motion skill for Motion (formerly Framer Motion), enter/exit variants, gesture handling, and scroll progress.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
frontend-quality
sivaguru-2113
Comprehensive quality checklist for web performance, Core Web Vitals, cross-browser compatibility, and assets.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
code-review-and-quality
sivaguru-2113
Evaluates code diffs for correctness, maintainability, performance, security, and testability.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
code-simplification
sivaguru-2113
Refactors complex implementation logic into simple, maintainable, readable patterns.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
context-engineering
sivaguru-2113
Optimizes repository context discovery, inspecting relevant source files and documentation before editing.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
documentation-and-adrs
sivaguru-2113
Architecture Decision Records (ADR) and technical documentation guidelines.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
git-workflow-and-versioning
sivaguru-2113
Best practices for git commits, versioning, branch management, and release tagging.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
incremental-implementation
sivaguru-2113
Guides small, focused, step-by-step code changes with validation at each stage.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
performance-optimization
sivaguru-2113
Identify bottlenecks, profile execution efficiency, and optimize application speed and memory usage.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
planning-and-task-breakdown
sivaguru-2113
Deconstructs complex feature requests into minimal, actionable, and testable sub-tasks.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
source-driven-development
sivaguru-2113
Grounds implementation choices in authoritative code sources, official documentation, and verified APIs.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
spec-driven-development
sivaguru-2113
Guides specification-first software development, defining interfaces, constraints, and contracts before writing code.
SkillBFreshness: B★ 1Claude Code +9
Signals
- Stars
- 1
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Aug 18, 2026 (2 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/sivaguru-2113/Agent-persona
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from sivaguru-2113
- 0.539score
motion-dev
sivaguru-2113
Declarative motion skill for Motion (formerly Framer Motion), enter/exit variants, gesture handling, and scroll progress.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
frontend-quality
sivaguru-2113
Comprehensive quality checklist for web performance, Core Web Vitals, cross-browser compatibility, and assets.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
code-review-and-quality
sivaguru-2113
Evaluates code diffs for correctness, maintainability, performance, security, and testability.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
code-simplification
sivaguru-2113
Refactors complex implementation logic into simple, maintainable, readable patterns.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
context-engineering
sivaguru-2113
Optimizes repository context discovery, inspecting relevant source files and documentation before editing.
SkillBFreshness: B★ 1Claude Code +9 - 0.536score
security-and-hardening
sivaguru-2113
Audit and harden software codebases against vulnerabilities, improper input validation, and secret exposure.
SkillBFreshness: B★ 1Claude Code +9
Cite this page
frontend-design skill. Agent Mart. https://agentmart.dev/skills/sivaguru-2113-frontend-design (last updated 2026-10-24)