菜单
Portal frontend styling with Tailwind CSS. Use when creating portal components, pages, or styling. All Tailwind classes must use tw- prefix. Never mix with Bootstrap dashboard components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Backend API development with Express, Zod validation, permissions, and security. Use when creating or modifying API endpoints, adding route handlers, implementing validation, or working with authentication/authorization.
Query and analyze production logs via BetterStack MCP. Use when diagnosing production issues, investigating errors, analyzing patterns, or monitoring system health.
Code quality standards, complexity management, and anti-over-engineering. Use when reviewing code, implementing features, or ensuring quality standards. Covers complexity limits, linting, and simplicity principles.
Documentation standards and decision criteria. Use when deciding whether to document, creating documentation, or maintaining existing docs. Covers significance thresholds, structure, and cross-referencing.
Git commit workflow and standards. Use when committing code, batching changes, or verifying builds before commits. Covers build verification, commit message format, and quality gates.
Debug local development issues by analyzing logs, checking processes, and diagnosing errors. Use when servers won't start, errors occur, or behavior is unexpected.
| name | portal-tailwind |
| description | Portal frontend styling with Tailwind CSS. Use when creating portal components, pages, or styling. All Tailwind classes must use tw- prefix. Never mix with Bootstrap dashboard components. |
The portal uses Tailwind CSS while the main dashboard uses Bootstrap. These MUST remain separate.
ALL Tailwind classes must use the tw- prefix.
// CORRECT
<div className="tw-bg-white tw-rounded-lg tw-shadow tw-p-4">
// WRONG - will conflict with Bootstrap
<div className="bg-white rounded-lg shadow p-4">
| Area | Styling | Can Use Tailwind? |
|---|---|---|
frontend/src/pages/portal/** | Tailwind CSS | Yes |
frontend/src/components/portal/** | Tailwind CSS | Yes |
frontend/src/layouts/PortalLayout.jsx | Tailwind CSS | Yes |
frontend/src/pages/dashboards/** | Bootstrap + SCSS | No |
frontend/src/components/** (non-portal) | Bootstrap + SCSS | No |
import React from 'react';
import '../../styles/portal-tailwind.css';
export default function ComponentName({ prop1, prop2 }) {
return (
<div className="tw-bg-white tw-rounded-lg tw-shadow">
{/* Component content */}
</div>
);
}
tw-bg-indigo-600, tw-text-indigo-600tw-text-gray-900tw-text-gray-700tw-text-gray-500tw-bg-white, tw-bg-gray-50, tw-bg-gray-100tw-bg-green-100 tw-text-green-800tw-bg-yellow-100 tw-text-yellow-800tw-bg-red-100 tw-text-red-800tw-bg-blue-100 tw-text-blue-800tw-text-2xl tw-font-bold tw-text-gray-900tw-text-lg tw-font-medium tw-text-gray-900tw-text-sm tw-text-gray-700tw-text-xs tw-text-gray-500tw-p-4 to tw-p-6tw-space-y-4 to tw-space-y-6tw-max-w-7xl tw-mx-auto tw-px-4 sm:tw-px-6 lg:tw-px-8Pre-defined component classes in portal-tailwind.css:
<div className="portal-card">
<div className="portal-card-header">Title</div>
<div className="portal-card-body">Content</div>
</div>
<button className="portal-btn-primary">Primary</button>
<button className="portal-btn-secondary">Secondary</button>
<span className="portal-badge-success">Active</span>
<span className="portal-badge-warning">Pending</span>
Use Heroicons (@heroicons/react):
import { CheckCircleIcon } from '@heroicons/react/24/solid';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
<CheckCircleIcon className="tw-h-5 tw-w-5 tw-text-green-500" />
<div className="tw-bg-white tw-rounded-lg tw-shadow tw-p-6">
<h3 className="tw-text-lg tw-font-medium tw-text-gray-900">Title</h3>
<p className="tw-mt-2 tw-text-sm tw-text-gray-500">Description</p>
</div>
<button className="tw-inline-flex tw-items-center tw-px-4 tw-py-2 tw-border tw-border-transparent tw-text-sm tw-font-medium tw-rounded-md tw-shadow-sm tw-text-white tw-bg-indigo-600 hover:tw-bg-indigo-700">
Click me
</button>
<input
type="text"
className="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-1.5 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600 sm:tw-text-sm"
/>
frontend/src/styles/portal-tailwind.css - Portal stylesfrontend/src/components/portal/ - Portal componentsfrontend/src/pages/portal/ - Portal pagesdocumentation/technical/frontend/design-system.md - Full design systemnode frontend/scripts/fetch-tailwind-ui.js "<url>"
Then convert to React with tw- prefix on all classes.