skillssh
Design System Overview
A dark, developer-centric interface inspired by terminal environments and open-source dashboards.
The interface prioritizes clarity, dense information display, and a hacker-style aesthetic. The design should feel technical, minimal, and functional rather than decorative.
The UI should resemble tools used by engineers such as GitHub dashboards, package registries, and CLI utilities.
The overall tone is monochrome with subtle gray contrasts and minimal accent usage.
Color System
The interface uses a dark monochrome palette designed for readability and developer tooling environments.
Primary background color is #000000, providing a deep black foundation.
Secondary background surfaces such as sections, cards, and command blocks should use #0f0f0f to create subtle separation from the main background.
Interactive surfaces and hoverable rows may use #151515 to indicate focus or interaction.
Primary text color is #ffffff, ensuring maximum readability against the dark background.
Secondary text such as metadata, repository names, or helper descriptions should use #a1a1a1.
Muted labels and tertiary information may use #6b6b6b.
Borders and separators should use #1f1f1f, creating subtle structural divisions without heavy visual weight.
The primary accent color used for highlights, buttons, and active elements should be #cfa76e, a muted gold tone that provides contrast without breaking the monochrome aesthetic.
Hover states for interactive elements should slightly brighten surfaces or increase text contrast rather than introducing new colors.
The palette should remain restrained and minimal to maintain the technical and developer-focused aesthetic.
Typography
Typography should resemble developer tooling and terminal interfaces.
Use a modern sans-serif font with clean geometry and high readability.
Headings should be bold and slightly condensed.
Body text should be medium weight and highly legible.
Tables and code-like data may use a monospace font to reinforce the technical feel.
Large hero headings should appear strong and block-like, giving the page a bold identity.
Hierarchy should be clear with strong contrast between headings, metadata, and data values.
Layout
The layout is wide and optimized for desktop usage.
Content is structured vertically with large sections.
The hero section appears at the top introducing the ecosystem.
The leaderboard list appears below containing sortable skills.
Navigation is minimal and positioned at the top right.
Spacing between sections should be generous to avoid visual clutter.
Tables should span the width of the content container and align data in clear columns.
Data rows should feel structured and scannable.
Navigation
Navigation is minimal and unobtrusive.
The main brand or logo appears in the top left.
Navigation links appear in the top right and include sections like official resources, audits, and documentation.
Links should appear subtle and become more prominent on hover.
The navigation bar should remain thin and lightweight.
Hero Section
The hero area introduces the concept of Skills.
A large bold title appears on the left side of the hero.
Supporting text explains the ecosystem and how it works.
A command snippet appears as a highlighted element to demonstrate how to install a skill.
The command area should resemble a terminal input field.
Icons representing supported AI agents appear beside the description.
The hero section should feel like the landing area of an open-source ecosystem.
Search Interface
A search input allows users to quickly discover skills.
The search bar should appear minimal and integrated into the page.
The input field should use subtle borders and dark surfaces.
Search results update the leaderboard list.
The interface should feel fast and responsive.
Leaderboard
The leaderboard is the central feature of the page.
It displays a ranked list of skills based on install counts.
Each row includes:
Skill ranking number Skill name Repository owner Install count
Rows should appear compact but readable.
Hover states may highlight rows slightly.
Ranking numbers should appear visually distinct to reinforce hierarchy.
Tabs above the leaderboard allow switching between views such as:
All Time Trending Hot
The leaderboard should feel similar to open-source package registries.
Data Table Design
The table should emphasize clarity and alignment.
Columns should align consistently across rows.
Numbers should be right-aligned to improve readability.
Rows should be separated by subtle horizontal dividers.
The table should allow dense information without feeling cluttered.
Hover states should provide subtle visual feedback.
Interaction Patterns
Hover states should slightly brighten elements.
Clickable rows should feel responsive.
Search input should focus clearly when active.
Tabs should clearly show which state is currently selected.
Animations should be minimal and quick.
The design should prioritize speed and responsiveness over decorative transitions.
Visual Style
The overall design language is minimal, technical, and developer-focused.
Avoid gradients, glow effects, or heavy shadows.
Use subtle borders and contrast instead of decorative styling.
Interfaces should resemble engineering dashboards or open-source tooling platforms.
The page should feel like a registry or index of reusable capabilities.
Component Guidelines
Buttons should be minimal with subtle hover feedback.
Input fields should use dark surfaces with light text.
Tables should prioritize density and scanability.
Badges or labels may be used for metadata such as categories or tags.
Icons should be simple line icons with minimal styling.
Tone and Personality
The product should feel like an open-source ecosystem.
The design language should communicate:
technical credibility clarity efficiency developer friendliness
The interface should prioritize information and usability above visual decoration.