skills.rest
jeninh
jeninhCOMMUNITY
Explore all skills by this author →
GitHub

hackclub-ui

Apply Hack Club UI styling to web interfaces via a single CSS link.

Updated Jan 16, 2026
Search Tags:#theming#frontend-design#ui-styling#hackclub#css-theme
One-click install
npx skills add https://github.com/jeninh/ampskills-dotfile --skill hackclub-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hackclub-ui
Source: https://github.com/jeninh/ampskills-dotfile/tree/main/.agents/skills/hackclub-ui
Command: npx skills add https://github.com/jeninh/ampskills-dotfile --skill hackclub-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a simple, opt-in way to apply Hack Club's distinctive UI styling to web interfaces, delivering a consistent look without enforcing changes.

Core Features & Use Cases

  • Opt-in UI theming via a single CSS link: <link rel="stylesheet" href="https://css.hackclub.com/theme.css">
  • Optional typography: include Phantom Sans for official HQ projects after user confirmation.
  • Consistent aesthetics: typography, spacing, and components align with Hack Club design language across HTML, React, Vue, Svelte, and other stacks.

Quick Start

Start by asking the user for consent to apply Hack Club UI styling. If approved, add the theme link:

<link rel="stylesheet" href="https://css.hackclub.com/theme.css"> If building an official Hack Club HQ site and the user agrees to Phantom Sans, also include: <link rel="stylesheet" href="https://css.hackclub.com/fonts.css">

Frequently Asked Questions about hackclub-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Hack Club styling to my web interface?▼

Apply Hack Club styling by adding the theme stylesheet link to your HTML head. After getting user consent, insert the CSS link to standardize typography and spacing across your web project.

Can I use the Hack Club theme in React, Vue, or Svelte?▼

Yes, the Hack Club theme works across React, Vue, Svelte, and standard HTML. It applies consistent aesthetics by linking an external stylesheet rather than relying on framework-specific dependencies.

How do I add the Phantom Sans font to a Hack Club HQ project?▼

Add the Phantom Sans font by including the font stylesheet link alongside the theme link. You must confirm with the user before applying this optional typography to official Hack Club HQ projects.

Does Hack Club UI styling force changes to my existing components?▼

No, Hack Club UI styling is strictly opt-in. It does not enforce changes or require bundling, allowing you to apply the aesthetic standard without altering your existing component structure.

What's the best way to standardize UI aesthetics across different web stacks?▼

Standardize UI aesthetics across different web stacks by linking a single external CSS file. This approach delivers consistent design language without installing dependencies or configuring bundlers.

Related Skills

Explore More Design & Creative Skills→
damntreckydamntrecky
1

webawesome

Provide over 50 accessible web components for React, Vue, Angular, and Svelte.

Community
Basic
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
FEMADOXFEMADOX
4

tailwind-css-patterns

Automate Tailwind CSS utility pattern creation for responsive UI components.

Community
Intermediate
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced