frontend-design
Frontend Design
Create interfaces with intentional aesthetics and professional execution. Avoid generic "template" looks.
Design Process
Before writing code, answer these questions:
- Purpose — What problem does this interface solve? Who uses it?
- Tone — What aesthetic direction? (brutalist, luxury, playful, editorial, retro-futuristic, etc.)
- Constraints — Device targets, accessibility requirements, performance budget
- Signature — What single element makes this memorable?
Commit to a direction. Timid design is worse than bold design with flaws.
Typography
Font Selection
More from s-hiraoku/vscode-sidebar-terminal
vscode-extension-expert
This skill provides expert-level guidance for VS Code extension development. Use when implementing new extension features, debugging extension code, designing WebView UIs, implementing Language Server Protocol features, or optimizing extension performance. Covers activation events, contribution points, VS Code API patterns, security best practices, testing strategies, and publishing workflows.
72vscode-webview-expert
This skill provides expert-level guidance for implementing VS Code WebView features. Use when creating WebView panels, implementing secure CSP policies, handling Extension-WebView communication, managing WebView state persistence, optimizing WebView performance, or debugging WebView rendering issues. Covers security best practices, message protocols, and VS Code-specific WebView patterns.
30mcp-deepwiki
This skill provides guidance for using DeepWiki MCP to explore GitHub repository documentation. Use when researching repository structure, understanding library APIs, asking questions about open-source projects, or exploring documentation for any GitHub repository.
25vscode-extension-refactorer
This skill provides expert-level guidance for refactoring VS Code extension code. Use when extracting classes or functions, reducing code duplication, improving type safety, reorganizing module structure, applying design patterns, or optimizing performance. Covers systematic refactoring workflows, code smell detection, safe transformation techniques, and VS Code-specific patterns.
23vscode-tdd-expert
This skill provides expert-level guidance for Test-Driven Development (TDD) in VS Code extension development following t-wada methodology. Use when writing tests before implementation, creating comprehensive test suites, implementing Red-Green-Refactor cycles, or improving test coverage for extension components like WebViews, terminal managers, and activation logic.
22vscode-extension-debugger
This skill provides expert-level guidance for debugging and fixing bugs in VS Code extensions. Use when investigating runtime errors, fixing memory leaks, resolving WebView issues, debugging activation problems, fixing TypeScript type errors, or troubleshooting extension communication failures. Covers systematic debugging workflows, common bug patterns, root cause analysis, and prevention strategies.
22