curiositech/windows-3-1-web-designer
skills/windows-3-1-web-designer/SKILL.md
Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Activate on 'windows 3.1', 'retro ui', 'beveled borders', 'win31', 'program manager', '90s aesthetic'. NOT for vaporwave (neon gradients), glassmorphism, macOS/iOS styling, flat design, or material design.
development
Updated Apr 4, 2026
$ install --global
skillsauthnpx skillsauth add curiositech/windags-skills windows-3-1-web-designerInstall 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 4, 2026, 2:55 PM4.8s5 files scanned
SKILL.md
- license:
- Apache-2.0
- name:
- windows-3-1-web-designer
- description:
- Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Activate on 'windows 3.1', 'retro ui', 'beveled borders', 'win31', 'program manager', '90s aesthetic'. NOT for vaporwave (neon gradients), glassmorphism, macOS/iOS styling, flat design, or material design.
- allowed-tools:
- Read,Write,Edit,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_refiner
- category:
- Design & Creative
- - skill:
- native-app-designer
- reason:
- Retro desktop app styling
Windows 3.1 Web Designer
Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI components using beveled borders, system gray palettes, and classic program manager styling.
When to Use
Use for:
- Retro-themed web applications with Windows 3.1 authenticity
- Converting vaporwave or modern UI to classic Win31 styling
- Nostalgic landing pages, documentation sites, portfolios
- Game interfaces with 90s desktop aesthetic
- Pixel-art adjacent web experiences
Do NOT use for:
- Vaporwave aesthetics → use vaporwave-glassomorphic-ui-designer
- Modern glassmorphism → use native-app-designer
- macOS/iOS styling → use native-app-designer
- Flat/Material design → use web-design-expert
Core Design System
Color Palette
| Color | Hex | Usage | |-------|-----|-------| | System Gray | #c0c0c0 | THE primary background | | Dark Gray | #808080 | Shadows, pressed states | | Navy | #000080 | Title bar background | | Teal | #008080 | Links, highlights | | White | #ffffff | Beveled highlights, inputs | | Black | #000000 | Beveled shadows, borders |
The Sacred Rule: Beveled Borders
OUTSET (Raised) - Buttons, toolbars:
- Top/Left border: WHITE
- Bottom/Right border: BLACK
- Inner shadow: light-gray TL, dark-gray BR
INSET (Sunken) - Text fields, content areas:
- Top/Left border: DARK GRAY
- Bottom/Right border: WHITE
- Inner shadow: black TL, light-gray BR
Typography
- Primary: VT323, Courier New (pixel-style)
- Headings: Press Start 2P (chunky pixel)
- Code: IBM Plex Mono, Courier Prime
Quick Reference
| Element | Background | Border Pattern | |---------|------------|----------------| | Window | #c0c0c0 | 3px solid black, inset bevel | | Titlebar | #000080 | none | | Button (up) | #c0c0c0 | inset white TL, black BR | | Button (down) | #c0c0c0 | inset black TL, white BR | | Input | #ffffff | inset 2px dark-gray | | Panel (raised) | #c0c0c0 | outset 2px | | Panel (inset) | #ffffff | inset 2px + shadow |
Anti-Patterns
Anti-Pattern: Gradients
What it looks like: linear-gradient(#00d4ff, #ff00ff)
Why wrong: Win31 has NO gradients—only solid colors
Instead: Solid var(--win31-teal) or var(--win31-navy)
Anti-Pattern: Neon Colors
What it looks like: #00d4ff, #ff00ff (bright neons) Why wrong: This is vaporwave, not Win31 Instead: Muted palette: teal (#008080), navy (#000080)
Anti-Pattern: Rounded Corners
What it looks like: border-radius: 8px
Why wrong: Win31 has sharp 90° corners everywhere
Instead: No border-radius (or 0)
Anti-Pattern: Blur Effects
What it looks like: backdrop-filter: blur(10px), soft shadows
Why wrong: Win31 has no blur—only hard-edge bevels
Instead: Sharp bevel shadows with no blur
Anti-Pattern: Dark Backgrounds
What it looks like: #1a1a2e, #16213e dark backgrounds Why wrong: Win31 is light—system gray everywhere Instead: #c0c0c0 system gray base
The Quick Test
If your component has:
- ❌ Any blur effects → NOT Win31
- ❌ Any gradient backgrounds → NOT Win31
- ❌ Any neon colors → NOT Win31
- ❌ Any rounded corners → NOT Win31
- ❌ Dark backgrounds → NOT Win31
It should have:
- ✅ System gray (#c0c0c0) base
- ✅ Beveled borders (white TL, black BR)
- ✅ Sharp corners everywhere
- ✅ Pixel fonts (VT323, Press Start 2P)
- ✅ Navy blue title bars
- ✅ Hard-edge box shadows only
File Naming Conventions
For authentic Win31 feel:
- All caps:
README.TXT,INSTALL.EXE - 8.3 format:
PROGRAM.EXE,CONFIG.SYS
MCP Integrations
| MCP | Purpose | |-----|---------| | 21st Century Dev | Scaffold base components, then override with Win31 CSS | | Component Refiner | Convert modern components to retro aesthetic |
Reference Files
references/design-system.md- Complete color palette, typography, beveled border patternsreferences/component-patterns.md- Full CSS for windows, buttons, forms, panelsreferences/anti-patterns.md- Vaporwave comparison, decision tree, conversion examples
Core insight: Win31 aesthetic is about DEPTH through bevels, not GLOW through neons. System gray is your canvas—beveled borders create the illusion of 3D.
Use with: vaporwave-glassomorphic-ui-designer (different aesthetic) | web-design-expert (modern designs)
Related Skills
curiositech/circuit-breakers-and-retries
tools
VerifiedTrustedCommunity
Building resilient distributed systems with circuit breakers, retries with full-jitter exponential backoff, retry budgets (per-request 3-attempt + per-client 10% ratio per Google SRE), deadline propagation, and the cascading-failure math (4 layers × 3 retries = 64x amplification). Grounded in Resilience4j, Microsoft Cloud Patterns, AWS Architecture Blog (Marc Brooker), and Google SRE Book.
4SKILL.mdUpdated May 6, 2026
curiositech/cdn-cache-control-headers
testing
VerifiedTrustedCommunity
Designing HTTP cache headers that work correctly across browsers, CDNs, and shared proxies — `Cache-Control` directives per RFC 9111, `stale-while-revalidate` and `stale-if-error` per RFC 5861, the Vary header for varying responses, and surrogate keys for tag-based purging. Grounded in IETF RFCs and Cloudflare/Fastly docs.
4SKILL.mdUpdated May 5, 2026
curiositech/content-security-policy-headers
development
VerifiedTrustedCommunity
Use when designing or fixing a Content Security Policy on a real site, choosing between nonce-based and hash-based CSP, adding strict-dynamic, debugging "Refused to execute inline script" errors, deploying CSP in report-only mode first, configuring report-to / report-uri, or auditing an existing policy for unsafe-inline / unsafe-eval / wildcards. Triggers: "CSP blocks legitimate inline script", strict-dynamic, nonce-{RANDOM}, sha256-{HASH}, object-src none, base-uri none, frame-ancestors, Trusted Types, X-Content-Security-Policy obsolete, report-only vs enforced. NOT for general HTTP security headers (HSTS, COOP/COEP), Trusted Types deep dive, CORS configuration, or building a WAF.
3SKILL.mdUpdated May 4, 2026
curiositech/api-versioning-strategy
tools
VerifiedTrustedCommunity
Choosing and operating an HTTP API versioning strategy that doesn't break clients — Stripe's date-based pinned versions, the Deprecation/Sunset header pair (RFC 9745 + RFC 8594), URI vs header vs media-type approaches, and the version-transformer pattern. Grounded in Stripe's published architecture and IETF RFCs.
3SKILL.mdUpdated May 4, 2026