Claude MarketplacesSubmit
julianoczkowski avatar

Frontend Design

julianoczkowski/designer-skills

This one takes frontend design seriously by anchoring you to actual aesthetic philosophies instead of generating another generic rounded-corner SaaS interface. Before you write any code, it walks you through the existing codebase to find components, tokens, and patterns you should reuse. Then you either pick a named style (Dieter Rams, Swiss, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis) or let it choose one that fits your context. Each philosophy comes with concrete rules for typography, color, layout, spacing, motion, and details. The result is opinionated frontend code that actually looks like something instead of the same Bootstrap derivative we've all seen a thousand times.

skills.sh installs
5.6K
GitHub stars
601
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add julianoczkowski/designer-skills --skill frontend-design --agent claude-code

Installs into .claude/skills of the current project.

Files

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

Example prompts

  • "Build the hero section from the brief"
  • "Create a card component in a Scandinavian style"
  • "I want this to feel like a Japanese magazine. Build the layout."
  • "Build the settings page. Use whatever style fits."

Before You Write Any Code

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/julianoczkowski/designer-skills
Categories
Frontend Development, DevOps & CI/CD, Code Review & Quality, Design & UI/UX
First seen
May 16, 2026

More from julianoczkowski/designer-skills

All 8

Recommended

More Frontend Development
1forcedotcom avatarexperience-ui-bundle-custom-app-generateforcedotcom/sf-skillsMUST activate when the project contains a uiBundles/*/src/ directory and the task involves creating or configuring a Custom Application for hosting a UI bundle 5.3Kskills.sh installs
2analogjs avatarangular-toolinganalogjs/angular-skillsUse Angular CLI and development tools effectively in Angular v20+ projects. Use for project setup, code generation, building, testing, and configuration. Trigge5.3Kskills.sh installs
3forcedotcom avatarexperience-ui-bundle-file-upload-generateforcedotcom/sf-skillsMUST activate when the project contains a uiBundles/*/src/ directory and the task involves uploading, attaching, or dropping files. Use this skill when adding f5.2Kskills.sh installs
4jeffallan avatarreact-native-expertjeffallan/claude-skillsBuilds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configur5.2Kskills.sh installs
5claude-office-skills avatarhtml-to-pptclaude-office-skills/skillsConvert HTML/Markdown to PowerPoint presentations using Marp5.1Kskills.sh installs
6jeffallan avatarangular-architectjeffallan/claude-skillsGenerates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, 5.1Kskills.sh installs