Skip to content

Commit 5cba740

Browse files
davila7claude
davila7
and
claude
authored
Improve validation modal text display and UX enhancements (#112)
## Changes Made: ### 1. Modal Text Display Improvements - Increased error/warning message font size from 14px to 16px for better readability - Improved line height from 1.5 to 1.6 for better spacing - Increased margin-bottom from 4px to 8px for better visual separation ### 2. Code Preview Text Wrapping - Removed horizontal scroll (`overflow-x: auto`) from code previews - Added `white-space: normal` to prevent excessive whitespace at line start - Added `word-wrap: break-word` and `overflow-wrap: break-word` for proper text wrapping - Applied to all code preview sections: - Error line text previews - Warning line text previews - Example line text in errors - Example line text in warnings ### 3. Line Number Scroll Synchronization - Added `position: relative` to `.code-body` for better layout control - Added `overflow: hidden` and `max-height: 600px` to `.code-line-numbers` - Added `max-height: 600px` to `.code-content` - Implemented JavaScript scroll sync between line numbers and code content - Line numbers now scroll perfectly in sync with code content ### 4. Clickable Error Line Numbers - Added `cursor: pointer` to error/warning line numbers - Added "Click to see details" tooltip on error/warning lines - Implemented click event listeners on all error/warning lines - Click handler searches through validators to find matching error - Opens validation modal with correct validator details when clicked - Added hover effects with `transform: translateX(-2px)` and `cursor: help` ## User Experience Improvements: - ✅ Error messages are now larger and easier to read (16px) - ✅ Code snippets wrap naturally without horizontal scroll - ✅ No excessive whitespace at the beginning of code lines - ✅ Line numbers stay synchronized during scroll - ✅ Error line numbers are interactive and open detailed validation modals - ✅ Better visual hierarchy with improved spacing and sizing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <[email protected]>
1 parent 43dd5f9 commit 5cba740

29 files changed

+131354
-623
lines changed

‎.claude/settings.local.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
"Read(/Users/danipower/.claude/local/node_modules/@anthropic-ai/claude-code/**)",
3737
"WebSearch",
3838
"WebFetch(domain:neon.com)",
39-
"Read(//Users/danipower/.claude/**)"
39+
"Read(//Users/danipower/.claude/**)",
40+
"Bash(git checkout -b feature/agent-validation-system)",
41+
"Bash(npm test -- StructuralValidator.test.js)"
4042
],
4143
"deny": []
4244
},

‎.github/workflows/component-security-validation.yml‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
name: Component Security Validation
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- 'cli-tool/components/**/*.md'
7+
- 'cli-tool/src/validation/**'
8+
- '.github/workflows/component-security-validation.yml'
9+
push:
10+
branches:
11+
- main
12+
paths:
13+
- 'cli-tool/components/**/*.md'
14+
15+
jobs:
16+
security-audit:
17+
name: Security Audit
18+
runs-on: ubuntu-latest
19+
20+
steps:
21+
- name: Checkout code
22+
uses: actions/checkout@v4
23+
with:
24+
fetch-depth: 0 # Full history for git metadata
25+
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v4
28+
with:
29+
node-version: '18'
30+
cache: 'npm'
31+
cache-dependency-path: cli-tool/package-lock.json
32+
33+
- name: Install dependencies
34+
run: |
35+
cd cli-tool
36+
npm ci
37+
38+
- name: Run Security Audit
39+
id: audit
40+
run: |
41+
cd cli-tool
42+
npm run security-audit:ci
43+
continue-on-error: false
44+
45+
- name: Generate JSON Report
46+
if: always()
47+
run: |
48+
cd cli-tool
49+
npm run security-audit:json
50+
51+
- name: Upload Security Report
52+
if: always()
53+
uses: actions/upload-artifact@v4
54+
with:
55+
name: security-audit-report
56+
path: cli-tool/security-report.json
57+
retention-days: 30
58+
59+
- name: Comment PR with Results
60+
if: github.event_name == 'pull_request' && always()
61+
uses: actions/github-script@v7
62+
with:
63+
script: |
64+
const fs = require('fs');
65+
const reportPath = 'cli-tool/security-report.json';
66+
67+
if (!fs.existsSync(reportPath)) {
68+
console.log('No security report found');
69+
return;
70+
}
71+
72+
const report = JSON.parse(fs.readFileSync(reportPath, 'utf8'));
73+
74+
const passed = report.summary.passed;
75+
const failed = report.summary.failed;
76+
const warnings = report.summary.warnings;
77+
const total = report.summary.total;
78+
79+
const status = failed === 0 ? '✅ PASSED' : '❌ FAILED';
80+
const emoji = failed === 0 ? '🎉' : '⚠️';
81+
82+
let comment = `## ${emoji} Security Audit Report\n\n`;
83+
comment += `**Status**: ${status}\n\n`;
84+
comment += `### Summary\n`;
85+
comment += `- **Total components**: ${total}\n`;
86+
comment += `- ✅ **Passed**: ${passed}\n`;
87+
comment += `- ❌ **Failed**: ${failed}\n`;
88+
comment += `- ⚠️ **Warnings**: ${warnings}\n\n`;
89+
90+
if (failed > 0) {
91+
comment += `### ❌ Failed Components\n\n`;
92+
93+
for (const component of report.components) {
94+
if (!component.overall.valid) {
95+
comment += `**${component.component.path}**\n`;
96+
comment += `- Errors: ${component.overall.errorCount}\n`;
97+
comment += `- Warnings: ${component.overall.warningCount}\n`;
98+
comment += `- Score: ${component.overall.score}/100\n\n`;
99+
100+
// Show top errors
101+
for (const [validator, result] of Object.entries(component.validators)) {
102+
if (result.errors && result.errors.length > 0) {
103+
comment += ` **${validator}**: ${result.errors.length} error(s)\n`;
104+
for (const error of result.errors.slice(0, 2)) {
105+
comment += ` - \`${error.code}\`: ${error.message}\n`;
106+
}
107+
}
108+
}
109+
comment += `\n`;
110+
}
111+
}
112+
}
113+
114+
comment += `\n---\n`;
115+
comment += `📊 View full report in [workflow artifacts](https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId})`;
116+
117+
// Post comment
118+
github.rest.issues.createComment({
119+
issue_number: context.issue.number,
120+
owner: context.repo.owner,
121+
repo: context.repo.repo,
122+
body: comment
123+
});
124+
125+
- name: Fail workflow if errors found
126+
if: failure()
127+
run: |
128+
echo "::error::Security audit found critical issues"
129+
exit 1

‎cli-tool/components/.claude-plugin/marketplace.json‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
{
2+
"agents": [
3+
{
4+
"name": "frontend-developer",
5+
"version": "1.0.0",
6+
"author": {
7+
"name": "Claude Code Templates Team"
8+
},
9+
"category": "development",
10+
"keywords": ["frontend", "react", "typescript", "ui", "responsive", "accessibility"],
11+
"license": "MIT",
12+
"repository": "https://github.com/davila7/claude-code-templates"
13+
},
14+
{
15+
"name": "backend-architect",
16+
"version": "1.0.0",
17+
"author": {
18+
"name": "Claude Code Templates Team"
19+
},
20+
"category": "development",
21+
"keywords": ["backend", "api", "microservices", "database", "architecture", "scalability"],
22+
"license": "MIT",
23+
"repository": "https://github.com/davila7/claude-code-templates"
24+
},
25+
{
26+
"name": "fullstack-developer",
27+
"version": "1.0.0",
28+
"author": {
29+
"name": "Claude Code Templates Team"
30+
},
31+
"category": "development",
32+
"keywords": ["fullstack", "frontend", "backend", "database", "api", "typescript"],
33+
"license": "MIT",
34+
"repository": "https://github.com/davila7/claude-code-templates"
35+
},
36+
{
37+
"name": "devops-engineer",
38+
"version": "1.0.0",
39+
"author": {
40+
"name": "Claude Code Templates Team"
41+
},
42+
"category": "devops",
43+
"keywords": ["devops", "ci-cd", "infrastructure", "kubernetes", "docker", "terraform"],
44+
"license": "MIT",
45+
"repository": "https://github.com/davila7/claude-code-templates"
46+
},
47+
{
48+
"name": "mobile-developer",
49+
"version": "1.0.0",
50+
"author": {
51+
"name": "Claude Code Templates Team"
52+
},
53+
"category": "mobile",
54+
"keywords": ["mobile", "react-native", "flutter", "ios", "android", "cross-platform"],
55+
"license": "MIT",
56+
"repository": "https://github.com/davila7/claude-code-templates"
57+
},
58+
{
59+
"name": "ios-developer",
60+
"version": "1.0.0",
61+
"author": {
62+
"name": "Claude Code Templates Team"
63+
},
64+
"category": "mobile",
65+
"keywords": ["ios", "swift", "swiftui", "uikit", "core-data", "xcode"],
66+
"license": "MIT",
67+
"repository": "https://github.com/davila7/claude-code-templates"
68+
},
69+
{
70+
"name": "ui-ux-designer",
71+
"version": "1.0.0",
72+
"author": {
73+
"name": "Claude Code Templates Team"
74+
},
75+
"category": "design",
76+
"keywords": ["ui", "ux", "design", "wireframes", "prototyping", "accessibility"],
77+
"license": "MIT",
78+
"repository": "https://github.com/davila7/claude-code-templates"
79+
},
80+
{
81+
"name": "cli-ui-designer",
82+
"version": "1.0.0",
83+
"author": {
84+
"name": "Claude Code Templates Team"
85+
},
86+
"category": "design",
87+
"keywords": ["cli", "terminal", "ui", "command-line", "design", "web"],
88+
"license": "MIT",
89+
"repository": "https://github.com/davila7/claude-code-templates"
90+
}
91+
]
92+
}

‎cli-tool/package-lock.json‎

Lines changed: 37 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎cli-tool/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@
3232
"dev:unlink": "npm unlink -g claude-code-templates",
3333
"pretest:commands": "npm run dev:link",
3434
"analytics:start": "node src/analytics.js",
35-
"analytics:test": "npm run test:analytics"
35+
"analytics:test": "npm run test:analytics",
36+
"security-audit": "node src/security-audit.js",
37+
"security-audit:ci": "node src/security-audit.js --ci",
38+
"security-audit:verbose": "node src/security-audit.js --verbose",
39+
"security-audit:json": "node src/security-audit.js --json --output=security-report.json"
3640
},
3741
"keywords": [
3842
"claude",
@@ -67,6 +71,7 @@
6771
"express": "^4.18.2",
6872
"fs-extra": "^11.1.1",
6973
"inquirer": "^8.2.6",
74+
"js-yaml": "^4.1.0",
7075
"open": "^8.4.2",
7176
"ora": "^5.4.1",
7277
"uuid": "^11.1.0",

0 commit comments

Comments
 (0)