From shipshitdev-library
Applies opinionated CSS styling to barebones HTML for tables, lists, status indicators, buttons, sections, and layouts. Adds interactive JS for copy buttons and collapsibles.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
Transform barebones HTML into styled output using a specific design system.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Transform barebones HTML into styled output using a specific design system.
<style> block from assets/base.css| Element | Class | Effect |
|---|---|---|
| Status text | .stale .warm .pending | Red/green/orange inline text |
| Trend | .trend-up .trend-down | Green ↑ / Red ↓ |
| Category tag | .tag-group .tag-dm .tag-money | Blue/purple/orange pill |
| Status pill | .status-success .status-error .status-pending | Filled green/red/orange |
| Filter toggle | .filter .filter.active | Outline / filled black |
| Time filter | .pill .pill.active | Small pill, black when active |
| Stat box | .stat > .stat-value + .stat-label | 28px number, 12px label |
| Table | default or .table-styled | Minimal or colored values |
| Section header | .section-header | Dark bar with white text |
| Collapsible | <details> + <summary> | Native HTML collapse |
| Insight | .insight | Italic, yellow background |
| Tier | .tier-gold .tier-silver .tier-bronze | Row background colors |
.table-styled for: hover effect, .positive/.negative cell colors, .highlight rowsth.sortable with <a href="?sort=col">Col ▼</a>.stale/.warm/.pending): Use for inline status in sentences.status-*): Use for badge-style indicators, typically with icon (✓ ✗ ◷).trend-up/.trend-down): Use for numeric changes, adds arrow automaticallyUse .section-header with emoji prefix for visual breaks:
<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>
When HTML has drafts or copy buttons, add this JS:
function saveDraft(el) {
localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function copyToClipboard(text, btn) {
navigator.clipboard.writeText(text).then(() => {
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 1500);
});
}
Convert URLs to native app links:
tg://resolve?domain=usernamesms:+14155551234background: #fff)class="dark" to <body> when user requests dark theme or context is trading/real-timeWhen styling output from quick-view or table-filters, these class mappings apply:
| Their Class | Style As |
|---|---|
.type-user | .status-pending (blue border) |
.type-draft | .status-pending (orange border) |
.type-done | .status-success (green border) |
.source | Already styled (muted, small) |
.meta | Already styled (muted header) |
.actions | Inline button group |
| Their Class | Style As |
|---|---|
.filter-bar | Flex row with gap |
.filter-chips | Inline chip container |
.chip | Dark pill with .chip-remove |
.filter-menu | Dropdown panel (.filter-menu) |
.empty-state | Centered, muted text |
The base.css includes styles for these classes automatically.
<style> tag in <head>