메뉴
Create portfolios using Devsync template with automated CV, GitHub, LinkedIn, and academics generation
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when building, testing, and deploying JavaScript/TypeScript applications. Reach for Bun when you need to run scripts, manage dependencies, bundle code, or test applications with a single unified tool.
Guide for creating effective skills following best practices. Use when creating or updating skills that extend agent capabilities.
Run and configure oxlint — the high-performance JavaScript/TypeScript linter built on the Oxc compiler stack. Use this skill whenever working in a project that has oxlint installed (check for `oxlint` in package.json devDependencies or an `.oxlintrc.json` / `oxlint.config.ts` config file). This includes when you need to lint code after making changes, fix linting errors, configure oxlint rules/plugins, set up or modify `.oxlintrc.json`, or migrate from ESLint.
| name | devsync-portfolio |
| description | Create portfolios using Devsync template with automated CV, GitHub, LinkedIn, and academics generation |
Create and maintain developer portfolios using the Devsync template system. This skill guides you through building portfolios where all content comes from DEVSYNC.json - never hardcode text in templates.
All UI text must use translations[lang]['key'] from @devsync/src/devsync/fields-translations.ts. Never write <h3>Projects</h3> - use <h3>{translations[lang]['Projects']}</h3>.
Templates are framework-agnostic. The developer chooses their own stack (Astro, Next.js, SvelteKit, Vue, vanilla HTML, etc.).
When generating a template, always ask:
Infer multilingual support directly unless user specifies otherwise.
{
"defaultLang": "en",
"site": "https://your-site.com",
"name": "Your Name",
"img": "https://image-url.com/photo.jpg",
"socialMedia": [{ "name": "LinkedIn", "url": "...", "icon": "...", "mdBadge": "..." }],
"githubUserName": "your-username"
}
{
"defaultLang": "en",
"site": "https://devsync.work",
"name": "Your Full Name",
"img": "https://your-image-url.com/your-image.jpg",
"socialMedia": [
{
"name": "LinkedIn",
"url": "https://www.linkedin.com/in/your-linkedin-handle",
"icon": "/icons/linkedin.svg",
"mdBadge": ""
}
],
"githubUserName": "your-github-username",
"en": {
"description": "Write a short professional summary about yourself. Example: Full-stack developer focused on developer experience, performance, and product quality.",
"jobTitle": "Your Current Job Title",
"status": {
"status": "your-status",
"badge": ""
},
"languages": [
{
"name": "Your Language 1 / Your Language 2",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googletranslate"
}
],
"experience": [
{
"company": "Your Company Name",
"position": "Your Position Title",
"img": "https://your-image-url.com/company-image.jpg",
"web": "https://your-company-website.com",
"description": "Describe your role and impact in one concise sentence.",
"date": "MM/YY - Present",
"links": [
{
"name": "Company Website",
"url": "https://your-company-website.com",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googlechrome"
}
],
"list": {
"title": "key-achievements",
"items": [
{
"highlight": "Achievement headline",
"description": "Describe one measurable result you delivered (performance, revenue, growth, reliability, etc.)."
}
]
},
"skills": [
{
"name": "Your Key Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/codeforces"
}
]
}
],
"projects": [
{
"name": "Your Project Name",
"img": "https://your-image-url.com/project-image.jpg",
"web": "https://your-project-url.com",
"links": [
{
"name": "GitHub",
"url": "https://github.com/your-github-username/your-project-repo",
"mdBadge": "",
"icon": "/icons/github.svg"
}
],
"description": "Describe what the project does and why it matters.",
"list": {
"title": "project-highlights",
"items": [
{
"highlight": "Technical highlight",
"description": "Describe one concrete technical decision or outcome from this project."
}
]
},
"skills": [
{
"name": "Project Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/git"
}
]
}
],
"education": [
{
"name": "Your University or Institution",
"degree": "Your Degree / Program",
"img": "https://your-image-url.com/education-image.jpg",
"date": "MM/YY - MM/YY",
"links": [
{
"name": "Program URL",
"url": "https://your-program-link.com",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googlechrome"
}
],
"list": {
"title": "education-highlights",
"items": [
{
"highlight": "Academic highlight",
"description": "Describe a relevant course, thesis, capstone, or achievement."
}
]
}
}
],
"certifications": [
{
"name": "Your Certification Name",
"url": "https://your-certification-url.com",
"list": {
"title": "what-this-validates",
"items": [
{
"highlight": "Validated area",
"description": "Describe what this certification validates for your profile."
}
]
},
"skills": [
{
"name": "Certification Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/coursera"
}
]
}
]
}
}
Key flexibility: Any section can be omitted - if experience is missing, it simply won't appear in CV. Portfolio can add custom fields beyond CV requirements.
{
"devsync": {
"pathToCompiledCV": "src/[lang]/cv.html"
}
}
Important: [lang] is a placeholder. The devsync build command iterates through available languages and replaces [lang] with each language code. If your portfolio is monolingual, the replacement still occurs but only one iteration happens.
The CLI command (bunx devsync build) executes:
bun installbun run buildDEVSYNC.json, filters out global fields to get language codespackage.json, replaces [lang], fetches HTML, generates PDFlinkedin-{lang}.md with professional summaryREADME.mdacademics/README.mdAvailable in 8 languages (en, es, fr, pt, de, zh, ja, ko):
Description, jobTitle, Status, LanguagesProfessional Experience, Projects, Education, CertificationsCore Skills, credential, academicsView Certificate, Selected projects, Let's connect, Github Profile, I am, LinksExtensible: Add new keys as needed for portfolio-specific UI text.
When a template needs UI text not covered by existing keys, add it to src/devsync/fields-translations.ts in all 8 languages:
'Open to work')// fields-translations.ts
export const translations = {
en: {
// ... existing keys
'Open to work': 'Open to work', // ← add here
},
es: {
// ... existing keys
'Open to work': 'Disponible para trabajar',
},
fr: {
'Open to work': 'Disponible',
},
// ... repeat for pt, de, zh, ja, ko
} as const
translations[lang]['Open to work']Never use the key string as literal UI text — always go through
translations[lang]. Missing a language will cause a TypeScript type error, which is the intended safety net.
.github/workflows/update-on-devsync-change.yml triggers on DEVSYNC.json pushes:
- run: bunx devsync build # Updates CV, README, LinkedIn, academics
- uses: git-auto-commit-action # Commits changes
bunx devsync build to generate artifactscv/{lang}.pdf - PDF CVREADME.md - GitHub profilelinkedin/{lang}.md - LinkedIn copyacademics/README.md - Academic historyZod schema in src/devsync/devsync-validator.ts validates:
Use parseDevsync(devsync) from @devsync/src/devsync/devsync.ts for validation.
import devsync, { languages, defaultLang, parseDevsync } from '@devsync/src/devsync/devsync'
Required structure for a Devsync portfolio template:
your-template/
├── public/
│ ├── poster-light-mode.webp # Light theme preview (600x315px)
│ ├── poster-dark-mode.webp # Dark theme preview (600x315px)
│ └── icons/ # Optional custom icons (linkedin.svg, github.svg, etc.)
├── src/
│ └── devsync/ # Copy from @devsync/src/devsync/
│ ├── devsync.ts
│ ├── devsync-validator.ts
│ └── fields-translations.ts
├── .github/
│ └── workflows/
│ └── update-on-devsync-change.yml
├── DEVSYNC.json
└── package.json
Required files:
public/poster-*.webp - Preview images for template gallerysrc/devsync/ - Core Devsync modules for translations and validation.github/workflows/update-on-devsync-change.yml - Auto-update workflowDEVSYNC.json - Configuration templatepackage.json - With devsync.pathToCompiledCV and devsync.poster configOptional:
public/icons/ - Custom icon SVGs referenced in socialMedia[].icon and links[].iconWhen publishing your Devsync template, include poster images for preview:
{
"name": "@your-username/devsync-template",
"devsync": {
"pathToCompiledCV": "src/[lang]/cv.html"
}
}
Poster images (required for template preview):
public/poster-light-mode.webp - Light theme preview (recommended: 600x315px)public/poster-dark-mode.webp - Dark theme preview (recommended: 600x315px)If posters are not provided, the default Devsync posters will be shown.
/icons/ for local, CDN URLs for externalMM/YY - Present or MM/YY - MM/YY