jmwinsta/webfront
skills/webfront/SKILL.md
Create highly distinctive, production-grade frontend interfaces with exceptional aesthetic quality and strong creative direction. Activates for requests to build/design web UIs—components, pages, landing pages, dashboards, posters, full apps, styling passes, and visual artifacts. Generates memorable, non-generic code that feels intentionally designed rather than default AI output.
development
Updated Apr 6, 2026
$ install --global
skillsauthnpx skillsauth add jmwinsta/winston-s-skills webfrontInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 10:48 AM133.9s10 files scanned
SKILL.md
- name:
- webfront
- description:
- Create highly distinctive, production-grade frontend interfaces with exceptional aesthetic quality and strong creative direction. Activates for requests to build/design web UIs—components, pages, landing pages, dashboards, posters, full apps, styling passes, and visual artifacts. Generates memorable, non-generic code that feels intentionally designed rather than default AI output.
WebFront — Distinctive & Production-Grade Frontend Design
npx skills add https://github.com/JMWinsta/Winston-s-Skills --skill webfront
[!TIP] This skill forces the creation of visually striking, cohesive, and memorable frontend work that deliberately escapes generic "AI slop" aesthetics.
Activation Triggers
Use /frontend-design or let auto-activate when asking to:
- "build / create / design / make" a component, page, screen, layout, dashboard, landing page, app UI, poster, or visual artifact.
- "style / beautify / redesign / polish" any existing UI code.
- "improve the design of" or "make this look better / more modern / distinctive".
- Generate HTML/CSS/JS, React/Vue/Svelte components, Tailwind + custom CSS, shadcn/ui extensions, Framer Motion animations, etc.
- Auto-activate ONLY for frontend/UI/visual work. Do NOT activate for backend, APIs, infra, or data tasks.
Domain Knowledge & References
This skill uses a Progressive Disclosure system. For specific industry standards, themes, and deciding factors, you MUST reference the following materials:
Real Estate / Property Tech
When building for real estate, property listings, or developer pages:
- Core Instructions: references/real-estate/instructions.md
- Deciding Factors: references/real-estate/deciding-factors.md
- Visual Themes: references/real-estate/themes.md
- SEO & Keywords: references/real-estate/seo-references.md
Beauty / Aesthetics / Salon
When building for beauticians, salons, spas, or luxury beauty brands:
- Core Instructions: references/beautician/instructions.md
- Deciding Factors: references/beautician/deciding-factors.md
- Visual Themes: references/beautician/themes.md
- SEO & Keywords: references/beautician/seo-references.md
Step-by-Step Process
-
Quick Context Absorption Identify purpose, audience, and technical stack. Identify the domain (Real Estate, Beautician, etc.) and load the relevant reference file.
-
Commit to One Bold Aesthetic Direction Pick one clear conceptual lane (e.g., Brutalist, Museumcore, Hyper-minimal Industrial, Retro-futurist). Never neutral, safe, or default ‘modern minimal’ unless explicitly requested.
-
Execute with Precision
- Typography: Pair distinctive fonts (e.g., Playfair Display + JetBrains Mono). Avoid Inter/system-ui defaults.
- Color: Use vivid accents and CSS variables + HSL. Add subtle texture overlays.
- Motion: Prefer CSS-first or Framer Motion. One orchestrated entrance > scattered wiggles.
- Layout: Break grids intentionally. Use asymmetry, diagonal flow, and bleed.
-
Output Rules
- Deliver complete, copy-paste-ready code.
- Use modern syntax (ESM, container queries,
:has()). - Include accessibility basics (ARIA, focus states).
- Wrap code in appropriate language tags.
Make every interface feel unmistakably designed, never accidentally generated. Commit fully to the chosen direction. Vary aesthetics aggressively — no convergence toward a house style.
Related Skills
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-qa-testing
development
VerifiedTrustedCommunity
Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-parallels-smoke
development
VerifiedTrustedCommunity
End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.
357,764SKILL.mdUpdated Apr 10, 2026